How to set the color of an icon in Angular Material

Question

I have this  which I would assume to work  but doesn t    lt mat-icon color  white  gt home lt  mat-icon gt    Then  I also have    lt button mat-raised-button color  accent  type  submit    disabled    recipientForm form valid  gt       lt mat-icon color  white  gt save lt  mat-icon gt SAVE  lt  button gt    This code snippet  for some reason  does work  shows the icon as white    How do I get the lone mat-icon to show up as white using the color attribute   I can easily just add a white class  but I want to understand this

User · Accepted Answer

That s because the color input only accepts three attributes   quot primary quot    quot accent quot  or  quot warn quot   Hence  you ll have to style the icons the CSS way   Add a class to style your icon   white-icon       color  white       Note  If you re using an SVG icon  you should make the class target the   lt svg gt   element     white-icon svg       fill  white      Add the class to your icon   lt mat-icon class  quot white-icon quot  gt menu lt  mat-icon gt

User · Answer

color  white  is not a known attribute to Angular Material   color attribute can changed to primary  accent  and warn  as said in this doc  your icon inside button works because its parent class button has css class of color white  or may be your color  accent  is white  check the developer tools to find it   By default  icons will use the current font color

User · Answer

lt mat-icon style  -webkit-text-fill-color blue  gt face lt  mat-icon gt

User · Answer

Since for some reason white isn t available for selection  I have found that mat-palette  mat-grey  50  was close enough to white  for my needs at least

User · Answer

In the component css or app css add Icon Color styles   material-icons color green   color   00FF00     material-icons color white   color   FFFFFF      In the component html set the icon class   lt mat-icon class  material-icons color green  gt games lt  mat-icon gt   lt mat-icon class  material-icons color white  gt cloud lt  mat-icon gt    ng build

User · Answer

Or simply   add to your element    ngStyle     color   myVariableColor    eg    lt mat-icon  ngStyle     color   myVariableColor   gt    getActivityIcon      lt  mat-icon gt    Where color can be defined at another component etc

User · Answer

Here s a move that I m using to set the color dynamically  it defaults to primary theme if the variable is undefined  in your component define your color      Sets the button colors - Defaults to primary them color       Input  buttonsColor    buttonsColor  string  in your style  sass here  - this forces the icon to use the color of it s container  mat-custom     mat-icon   mat-icon-button       color inherit  important           in your html surround your button with a div          lt div  class mat-custom   quot    buttonsColor quot   style color   quot  buttonsColor quot  gt                lt button mat-icon-button  click   quot doSomething   quot  gt                   lt mat-icon  svgIcon   quot  refresh  quot  color  quot primary quot  gt  lt  mat-icon gt               lt  button gt           lt  div gt

[angular] How to set the color of an icon in Angular Material?

Examples related to angular

Examples related to angular-material

Examples related to angular-material2