Comment définir la couleur d'une icône dans un matériau angulaire?

Question

je ce que je suppose au travail, mais qui ne fonctionne pas:

<mat-icon color="white">home</mat-icon> 

Ensuite, j'ai aussi:

<button mat-raised-button color="accent" type="submit" 
[disabled]="!recipientForm.form.valid"> 
    <mat-icon color="white">save</mat-icon>SAVE 
</button> 

Cet extrait de code, pour une raison quelconque, ne fonctionne (spectacles l'icône est blanche).

Comment puis-je obtenir le mat-icon seul à apparaître en blanc en utilisant l'attributcolor? (Je peux facilement ajouter une classe blanche, mais je veux comprendre cela)

Answer 1

C'est parce que le @Input() color accepte seulement trois attributs: "primary", "accent" ou "warn". En d'autres termes, vous:

1. Définissez votre thème en blanc pour le primaire/l'accent.

   styles.scss:

   @import '~@angular/material/theming'; 
   
   @include mat-core(); 
   
   $app-primary: mat-palette($mat-white); 
   $app-accent: mat-palette($mat-pink); 
   $my-app-theme: mat-light-theme($app-primary, $app-accent); 
   @include angular-material-theme($my-app-theme); 
   

2. utilisation est comme ci-dessous:

   <mat-icon color="primary">menu</mat-icon> 
   

Ou:

1. il suffit d'ajouter une classe de style icône:

   .white-icon { 
       color: white; 
   } 
   

2. Ajouter la classe à l'icône:

   <mat-icon class="white-icon">menu</mat-icon> 
   

Answer 2

color="white" n'est pas un attribut connu pour Matériau angulaire. L'attribut de couleur peut être changé en primary, accent et warn. comme indiqué dans cette doc

votre icône à l'intérieur du bouton fonctionne parce que son bouton parent a la classe css de color:white, ou peut être votre color="accent" est blanc. vérifiez les outils de développement pour le trouver.

Par défaut, les icônes utiliser la couleur de la police

Answer 3

<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon> 

Answer 4

Dans le component.css ou app.css ajouter des styles Icône Couleur

.material-icons.color_green { color: #00FF00; } 
.material-icons.color_white { color: #FFFFFF; } 

Dans le composant .html définir la classe d'icônes

<mat-icon class="material-icons color_green">games</mat-icon> 
<mat-icon class="material-icons color_white">cloud</mat-icon> 

ng construire

Answer 5

Ou tout simplement

ajouter à votre élément

[ngStyle]="{'color': , myVariableColor}"

par exemple

<mat-icon [ngStyle]="{'color': myVariableColor}">{{ getActivityIcon() }}</mat-icon>

Où color peut être défini sur un autre composant, etc.