CODEWITHSUNDEEP
angularangular-materialangular-material2
Joshua Kemmerer
Joshua Kemmerer

Reputation: 1673

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

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)

Upvotes: 102

Views: 256659

Answers (8)

Sameer
Sameer

Reputation: 5188

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

Upvotes: 3

Edric
Edric

Reputation: 26821

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>

Upvotes: 157

ShanieMoonlight
ShanieMoonlight

Reputation: 1861

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>

Upvotes: 0

Jimmy Kane
Jimmy Kane

Reputation: 16865

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

Upvotes: 18

Naser AlOqab
Naser AlOqab

Reputation: 497

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.

Upvotes: 0

sfanjoy
sfanjoy

Reputation: 690

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

Upvotes: 24

Matheus Frik
Matheus Frik

Reputation: 875

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

Upvotes: 7

Hareesh
Hareesh

Reputation: 6900

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

Upvotes: 9

Related Questions