Angular Material provides a <mat-icon>
component to display icons. These icons use the Material Icons font by default. You can find the list of Material Icons here. Icons can be defined as a text node inside the <mat-icon>
element or using the fontIcon
attribute.
Changing color
To change the color of an Angular Material icon, you can use CSS inline styles or CSS classes with the color
property.
Using inline style
Play icon
<mat-icon aria-label="play icon">
play_circle_outline
</mat-icon>
Red-colored play icon.
<mat-icon style="color: red" aria-label="play icon">
play_circle_outline
</mat-icon>
Using CSS class
Custom CSS class
.icon-play {
color: red;
}
Play icon
<mat-icon aria-label="play icon">
play_circle_outline
</mat-icon>
Red-colored play icon
<mat-icon class="icon-play" aria-label="play icon">
play_circle_outline
</mat-icon>
Changing size
To change the size of an Angular Material icon, you can use CSS inline styles or CSS classes with the font-size
, width
, and high
properties.
Using inline style
Play icon
<mat-icon aria-label="play icon">
play_circle_outline
</mat-icon>
Play icon with size adjustment
<mat-icon style="font-size: 3rem; width: 3rem; height: 3rem" aria-label="play icon">
play_circle_outline
</mat-icon>
Using CSS class
Custom CSS class
.icon-play {
font-size: 3rem;
width: 3rem;
height: 3rem;
}
Play icon
<mat-icon aria-label="account tree icon">
play_circle_outline
</mat-icon>
Play icon with size adjustment
<mat-icon class="icon-play" aria-label="account tree icon">
play_circle_outline
</mat-icon>
Conclusion
You can also use ngClass
for dynamic class binding when styling Angular Material icons.