Comment ajouter une icône au bouton "mat-icon" ?

Question

J'utilise Angular avec Material

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

J'essaie d'ajouter une icône à un bouton, mais je ne sais pas comment faire et je ne trouve pas de documentation à ce sujet.

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

En regardant les docs, il y a ceci :

ce bouton a le html suivant :

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="stackoverflow.com/"><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-ce la bonne façon de faire ?

Answer 1

Il suffit d'ajouter le <mat-icon> à l'intérieur de mat-button ou mat-raised-button . Voir l'exemple ci-dessous. Je n'utilise pas l'icône matérielle au lieu de votre svg pour la démonstration :

<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 démo de stackblitz .

Answer 2

Tout ce que vous devez faire est d'ajouter le mat-icon-button à l'élément bouton dans votre modèle. Dans l'élément bouton, spécifiez l'icône souhaitée à l'aide d'une balise mat-icon composant.

Vous devez importer MatButtonModule et MatIconModule dans votre fichier de module d'application.

À partir de la page d'exemples de boutons matériels Angular, cliquez sur le bouton Afficher le code et vous verrez plusieurs exemples qui utilisent la police des icônes matérielles, par exemple.

<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

Dans votre cas, utilisez

<mat-icon>thumb_up</mat-icon>

Conformément au guide de démarrage à l'adresse https://material.angular.io/guide/getting-started vous devrez charger la police de l'icône matérielle dans votre index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Vous pouvez aussi l'importer dans votre fichier global styles.scss.

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Comme il est mentionné, n'importe quelle police d'icône peut être utilisée avec le composant mat-icon.

Answer 3

Ma préférence va à l'utilisation de la inline attribut. L'icône s'adaptera ainsi correctement à 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 l'ajoute à mon styles.css à :

• résoudre le problème d'alignement vertical de l'icône à l'intérieur du bouton

• Les polices des icônes matérielles sont toujours un peu trop petites par rapport au texte des boutons.

  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; }

Answer 4

Ajouter à app.module.ts

importez {MatIconModule} de '@angular/material/icon' ;

& lien dans votre index global.html.

Answer 5

Les icônes matérielles utilisent la police des icônes matérielles, et la police doit être incluse dans la page.

Voici le CDN de Google Web Fonts :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">