Comment ajouter une icône à mat-icône-bouton

Je suis en utilisant Angulaire avec le Matériel

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

Je suis en train d'ajouter une icône de bouton, mais je ne peux pas comprendre comment le faire, et ne peut pas trouver de la documentation pour cette.

https://material.angular.io/components/button/api

à la recherche de la documentation, il y a ceci:

Comment ajouter une icône à mat-icône-bouton

que le bouton a le code html suivant:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

est que la bonne façon de le faire?

OriginalL'auteur Alexander Mills | 2018-01-05

angular-material2 angular5

47

Il suffit d'ajouter le <mat-icon> à l'intérieur de mat-button ou mat-raised-button. Voir l'exemple ci-dessous. Non pas que je suis à l'aide du matériel de l'icône à la place de votre svg pour la démo but:
```
<button mat-button>
    <mat-icon>mic</mat-icon>
    Start Recording
</button>
```
OU
```
<button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon>
    Start Recording
</button>
```
Voici un lien vers stackblitz démo.

merci, une idée de comment je peux utiliser une icône qui n'est pas l'une des icônes par défaut? Je veux utiliser le bouton "jouer" (comme un rempli de chevron), mais "jouer" n'est pas une icône disponible.
Dans ce cas, vous devez vous inscrire et de l'icône à l'aide de tapis icône de registre.
Salut @Fayçal, je l'utilise aussi et cela a fonctionné, mais je suis de l'inscription de l'icônes SVG et de les utiliser comme il suit <mat-icône svgIcon="recherche"></mat-icône> mais lorsque vous l'utilisez à l'intérieur d'un <button> il n'est pas rendu, savez-vous pourquoi?
vous devrez enregistrer vos icônes svg: matériel.angulaire.io/composants/icône/vue d'ensemble#enregistrement des icônes
pouvez-vous svp m'aider à résoudre ce stackoverflow.com/questions/51925724/... @Fayçal

OriginalL'auteur Faisal
9

Tout ce que vous devez faire est d'ajouter le mat-icône-bouton directive de l'élément bouton dans votre modèle. À l'intérieur de l'élément bouton spécifier l'icône désirée avec un mat-icône composant.

Vous aurez besoin d'importer MatButtonModule et MatIconModule dans votre application fichier module.

De l'angle de Matériel de boutons de la page d'exemple, frapper le bouton afficher le code et vous verrez plusieurs exemples de l'utilisation du matériel icônes de police, par exemple.
```
<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
```
Dans votre cas, l'utilisation
```
<mat-icon>thumb_up</mat-icon>
```
Selon le guide de mise en route à https://material.angular.io/guide/getting-started, vous devrez charger le matériau icône de la police dans votre index.html.
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" >
```
Ou de l'importer dans vos styles.scss.
```
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
```
Qu'il mentionne, une icône de la police peut être utilisé avec le mat-icône du composant.

Juste pour info, cela crée un bouton circulaire autour de l'icône. Donc, si vous ajoutez un bouton de texte à côté de l'icône, il va casser.

OriginalL'auteur Jason Schroder
4

Ajouter à l'application.le module.ts

importer {MatIconModule} '@angulaire/matériel/icône';

& lien dans votre global index.html.

OriginalL'auteur Alexandr Bulgakov

Ma préférence est d'utiliser le inline attribut. Ce sera la cause de l'icône pour correctement à l'échelle de la taille du bouton.

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

Je ajouter à mon styles.css:

résoudre l'alignement vertical problème de l'icône à l'intérieur du bouton
matériel icône polices sont toujours un peu trop petit par rapport au texte du bouton

button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}

OriginalL'auteur rynop

0

La matière utilisée pour les icônes l'icône du Matériau de police, et la police doit être inclus avec la page.

Voici le CDN de Google Web Fonts:
```
<link  href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
OriginalL'auteur Alex

Vous devez vous connecter pour publier un commentaire.