web-dev-qa-db-fra.com

Comment ajouter une icône au mat-icon-button

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 au bouton, mais je ne peux pas comprendre comment le faire et je ne trouve pas de documentation pour cela.

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

en regardant les docs, il y a ceci:

 enter image description here

ce 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-ce la bonne façon de le faire?

angular-material2angular5
17
Alexander Mills

Ajoutez simplement le <mat-icon> dans mat-button ou mat-raised-button. Voir l'exemple ci-dessous. Non pas que j'utilise une icône de matériau à la place de votre svg à des fins de 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 stackblitz demo .

38
Faisal

Tout ce que vous avez à faire est d’ajouter la directive mat-icon-button à l’élément button de votre modèle. Dans l'élément de bouton, spécifiez l'icône souhaitée avec un composant mat-icon.

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

Dans la page exemple de boutons Matériau angulaire, cliquez sur le bouton Afficher le code et vous verrez plusieurs exemples utilisant la police des icônes de matériau, 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>

Selon le guide de démarrage de https://material.angular.io/guide/getting-started , vous devez charger la police de l'icône du matériau dans votre index.html.

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

Ou importez-le dans votre styles.scss global.

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

Comme il est mentionné, toute police d’icône peut être utilisée avec le composant mat-icon.

9
Jason Schroder

Ajouter à app.module.ts

importer {MatIconModule} à partir de '@ angular/material/icon';

& link dans votre index.html global.

2
Alexandr Bulgakov

Ma préférence est d'utiliser l'attribut inline. Cela entraînera une mise à l'échelle correcte de l'icône avec 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>

J'ajoute ceci à mon styles.css à:

  • résoudre le problème d'alignement vertical de l'icône à l'intérieur du bouton
  • les polices matérielles sont toujours un peu trop petites 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;
}
2
rynop

Les icônes Matériau utilisent la police Matériau, 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">
0
Alex