web-dev-qa-db-fra.com

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

J'ai commencé à utiliser Angular Material dans mon projet et je me demandais comment changer la couleur de svg dans un am-button.

Ceci est mon code:

<md-button class="md-fab md-primary">
    <md-icon
        class="ng-scope ng-isolate-scope md-default-theme"
        style="height: 14px; width: 14px;"
        md-svg-src="img/material-icons/core/arrow-forward.svg"
    ></md-icon>
</md-button>

Que dois-je ajouter pour changer la couleur du svg du noir actuel au blanc, comme dans démonstration du bouton de Google ? (section "Bouton d'icône utilisant Font-icons")

angularjsangular-material
29
maryum375

Pour les personnes essayant de colorier leur icône md, j'ai découvert que j'avais le même problème avec Angular 1.3.x et Angular Material 0.8.x.

J'ai résolu le problème en modifiant mes fichiers SVG et en supprimant l'attribut "remplissage" qui remplaçait toute couleur héritée.

Après avoir supprimé cet attribut "remplissage" dans chaque fichier SVG, je pouvais bien choisir la couleur que je voulais attribuer à l'icône grâce à CSS comme spécifié par Jason Aunkst .

15
MeuhMeuh

Je suis sur le matériau angulaire 0.8, et j'ai simplement ajouté 

    style="color:white;font:bold;"

à l'élément md-icon.

16
thunk

le SVG est imbriqué sous le ng-icon, il vous suffit donc d'ajouter ceci à votre CSS et d'ajouter fill: red; au style sur ng-icon.

md-icon svg {
  fill: inherit;
}
12
Jason Aunkst

Ce qui suit est la seule façon dont je l’ai obtenu via des feuilles de style.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}
6
thrice801

J'utilise ceci dans le CSS: 

.my-icon svg
{
   fill : #fff;
}

Et dans le HTML: 

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

Fonctionne bien!

4
Pramit Kundu

Ajoutez ceci à votre css:

svg {
    fill: inherit;
}

Le svg va maintenant hériter de l'attribut fill de votre md-icon

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
2
Jose Sevilla IV

Vous devriez pouvoir le faire en ajoutant "fill: white" au style de l'icône.

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>
2
Mark Collins

Le problème semble être lié aux SVG téléchargés depuis les icônes de Google Design car ils remplacent l'attribut de remplissage de la racine svg. Comparez la source d'affichage des SVG sur Google Design avec ceux utilisés dans l'exemple .

Solution:: Remplacer les données en css.

md-icon svg {
    fill: currentColor;
}
0
Pratyush

J'avais un problème similaire lorsque j'essayais de changer la couleur de l'icône svg par défaut. Si vous rencontrez le même problème, assurez-vous de vérifier la version de matériau angulaire que vous utilisez actuellement. Actuellement, j'utilise le matériau angulaire "0.7.1", ce qui est tout à fait important.

NOTE: avec ma version actuelle de Angular-material (0.7.1), la directive <mdIcon></mdIcon> vérifie uniquement si attr.Icon est défini ou non lors de postLinking compileFunction. Avec cette implémentation, afin de référencer vos fichiers d'icônes svg, vous ajoutez simplement l'attribut icon à votre directive d'élément <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>. Notez que dans la version angulaire précédente, vous pourriez avoir utilisé md-src-svg pour référencer vos fichiers svg, ce n’est plus le cas dans la version 0.7.1.

Donc, si vous utilisiez les instructions 0.7.1 et suivantes, vous devriez obtenir un rendu correct de votre icône svg. Il est maintenant temps de changer la couleur de fond du svg que vous utilisez. 

Raw svg file avant toute modification: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

Vous devriez avoir un dossier dans votre projet où vous enregistrez toutes vos icônes svg, dans mon cas, j'ai un dossier nommé icons où je stocke toutes mes icônes svg. L'exemple de fichier svg ci-dessus est l'icône svg non modifiée, d'où je viens de https://github.com/google/material-design-icons . (Par défaut, son rendu sous forme de fichier svg noir)

Pour changer le fichier svg par défaut, vous devez simplement ajouter un attribut de remplissage à votre fichier svg brut. Voir la version modifiée du fichier svg:

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

J'ai simplement ajouté fill = "green" au fichier svg de l'élément path, et maintenant mon icône svg est rendue en tant que couleur verte au lieu de noir par défaut. Je sais que certains d'entre vous utilisent peut-être une version différente de angular-material, mais le mécanisme de modification de la couleur par défaut svg devrait s'appliquer de la même manière. J'espère que cela peut être utile pour résoudre vos problèmes, merci!

0
JayKan

J'avais un problème similaire: je devais changer la couleur SVG à l'aide de CSS, mais je devais également conserver la couleur SVG d'origine (par exemple, fill = "# fff") lorsqu'aucune feuille CSS n'était fournie.

J'ai amélioré l'approche de Jason Aunkst pour que cela fonctionne. Voici la solution:

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

Cette classe définira l'élément enfant de svg avec un attribut de remplissage pour qu'il hérite de la valeur de couleur tant que le svg est l'enfant d'un élément md-icon contenant l'attribut style avec une valeur de couleur.

Cela ne fonctionnera que sur les SVG utilisant une seule couleur de remplissage. Ajustez au besoin, espérons que cela aide!

0
Andreas V

La solution la plus simple

Désormais, il n'est plus nécessaire de modifier la propriété svg ou fill.

Ajoutez simplement le !important à la propriété de couleur de md-icon en CSS: 

md-icon {
  color: #FFF !important;
}
0
Sagar

Une façon de le faire est de définir un sélecteur de classe personnalisé.

HTML:

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS:

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

Codepen ici: http://codepen.io/anon/pen/pjxxgx

0
bigosmallm