How to set the color of an icon in Angular Material?
AngularAngular MaterialAngular Material2Angular Problem Overview
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)
Angular Solutions
Solution 1 - Angular
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:
-
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; }
-
Add the class to your icon:
<mat-icon class="white-icon">menu</mat-icon>
Solution 2 - Angular
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
Solution 3 - Angular
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
Solution 4 - Angular
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
Solution 5 - Angular
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
Solution 6 - Angular
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
Solution 7 - Angular
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.
Solution 8 - Angular
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>