Comment définir la couleur d'une icône dans Angulaire du Matériel?
J'ai, ce que je suppose de travailler, mais n'a pas:
<mat-icon color="white">home</mat-icon>
Puis, 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, n'travail (affiche l'icône blanche).
Comment puis-je obtenir le lone mat-icon
à apparaître comme blanc à l'aide de la color
attribut? (Je peux facilement il suffit d'ajouter une classe blanche, mais je veux comprendre ce)
Vous devez vous connecter pour publier un commentaire.
C'est parce que la
color
entrée accepte uniquement les trois attributs:"primary"
,"accent"
ou"warn"
. En d'autres termes, vous pouvez soit:Ensemble de votre thème blanc pour le primaire/accent.
styles.scss
:Utilisation est comme ci-dessous:
Ou:
Il suffit d'ajouter une classe de style de votre icône:
Ajouter à la classe de votre icône:
fill: currentColor;
après tout..a
est souvent appliquée qui ont préséance sur le présent. Veillez à retirer leclass='a'
et pas seulement laa { fill: ... }
attributDans le composant.css ou de l'application.css ajouter de la Couleur de l'Icône styles de
Dans le component.html définir l'icône de la classe
ng construire
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éfinie à un autre composant, etccolor="white"
n'est pas un attribut Angulaire du Matériel.attribut de couleur peut être modifiée à
primary
,accent
, etwarn
. comme dit dans ce docvotre icône de l'intérieur de bouton fonctionne parce que sa classe parente bouton a de la classe css de
color:white
, ou peut-être votrecolor="accent"
est blanc. vérifier les outils de développement pour le trouver.Par défaut, les icônes d'utiliser la couleur de police