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)
This question is related to
angular
angular-material
angular-material2
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
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>
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.
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
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
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
Source: Stackoverflow.com