92

I have this, which I would assume to work, but doesn't:

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

Then, I also have:

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

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)

Edric
  • 24,639
  • 13
  • 81
  • 91
Joshua Kemmerer
  • 1,553
  • 2
  • 14
  • 29

8 Answers8

141

That's because the color input only accepts three attributes: "primary", "accent" or "warn". Hence, you'll have to style the icons the CSS way:

  1. 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 `<svg>` element */
.white-icon svg {
    fill: white;
}

  2. Add the class to your icon:

    <mat-icon class="white-icon">menu</mat-icon>
Edric
  • 24,639
  • 13
  • 81
  • 91
  • That must be correct, but why would it work if embedded under a Material button? – Joshua Kemmerer Oct 18 '17 at 15:36
  • Maybe because it inherits the color? It uses `fill: currentColor;` after all. – Edric Oct 19 '17 at 12:38
  • how will it work if i have 2 themes in styles.scss? can the color be different of the icon based on which theme i pick at runtime? – Vik Apr 13 '18 at 23:33
  • @Vik SCSS has nested classes – Edric Apr 14 '18 at 07:49
  • 3
    if your SVG has styled defined inside you will have to remove them. eg. the style `.a` is often applied which will take precedence over this. Be sure to remove the `class='a'` and not just the `a { fill: ... }` attribute – Simon_Weaver Jun 11 '18 at 02:21
  • also I'd never heard of 'currentColor' which is used by mat-icon https://css-tricks.com/currentcolor/ (you can actually use color: white instead of fill: white when you have stripped the classes) – Simon_Weaver Jun 11 '18 at 02:22
  • My was inside a ` – kebab-case Oct 25 '19 at 02:03
  • If I have an object say myObj and it has a field say isActive and I just want to render the color="warn" or color="primary" how can I achieve it? – kushal Baldev Jul 07 '20 at 13:44
20

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

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

ng build

Frederik Struck-Schøning
  • 12,981
  • 8
  • 59
  • 68
sfanjoy
  • 640
  • 6
  • 16
  • 1
    this is a much more simple way to do the job. I thought it was a kind of selector at first, thanks to your answer I've figured it out – Brother Eye Oct 22 '18 at 09:03
17

Or simply

add to your element

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

eg

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

Where color can be defined at another component etc

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
Jimmy Kane
  • 16,223
  • 11
  • 86
  • 117
  • 4
    Avoid using functions inside of .html files, it's bad practice. More informations here - https://blog.appverse.io/why-it-is-a-bad-idea-to-use-methods-in-the-html-templates-with-angular-2-30d49f0d3b16 – szymeo May 26 '19 at 18:21
  • 3
    @sgracki are you going to comment to every answer on SO about why not use those methods? – Jimmy Kane May 26 '19 at 18:53
  • yes, of course. Currently i am building team of senior angular developers that will improve overall quality of answers here. – szymeo May 29 '19 at 13:58
  • 2
    what does this have todo with my answer about the color change? @sgracki Also what you are doing, commenting out of scope I dont think it follows the community standards. Good luck building your team and gettings views on your blog. I have reported this behaviour. – Jimmy Kane May 29 '19 at 14:55
  • 1
    no offence :) Just saying it's not a good practice using functions inside .html files. Keep calm and code on! Best regards! – szymeo Jun 03 '19 at 03:41
  • 6
    Pretty sure ngStyle was made for this – Bob Thomas Aug 10 '19 at 11:52
9

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

Hareesh
  • 6,770
  • 4
  • 33
  • 60
5
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
Matheus Frik
  • 835
  • 7
  • 10
3

For future readers, Here is the explanation.

You cannot add HTML colors(red, white, green) to color directive directly.
You are only allowed to add (primary, accent, and warn).

What this color directive does is add classes to the element based on the given value

e.g:

<mat-icon color="primary">home</mat-icon> <!-- this will add (.mat-primary) class -->
<mat-icon color="accent">home</mat-icon> <!-- this will add (.mat-accent) class -->
<mat-icon color="warn">home</mat-icon> <!-- this will add (.mat-warn) class -->

Now, these classes contains css color property.

//This comes from material theming
.mat-primary {
 color: #3f51b5;
}

See what color - built-in theme has for these (mat-primary, mat-accent, mat-warn).

So if you want to change the color globally for every material component, Then create your own custom palette

If you just want to change for a single element then follow sfanjoy's answer

Sameer
  • 4,758
  • 3
  • 20
  • 41
0

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.

Naser AlOqab
  • 499
  • 4
  • 9
0

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

        <div [class.mat-custom]="!!_buttonsColor" [style.color]="_buttonsColor"> 
            <button mat-icon-button (click)="doSomething()">
                <mat-icon [svgIcon]="'refresh'" color="primary"></mat-icon>
            </button>
        </div>
ShanieMoonlight
  • 1,623
  • 3
  • 17
  • 28