Adding Material Icons to our Angular Material Stackblitz Project | Task

Ole Ersoy
Sep - 06  -  2 min

Scenario

We want to use outline, filled, rounded, sharp, two-tone variations of the home mat-icon.

Approach

Include all the icon variations in the material icons link.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"/>

And declare the icons.

<mat-icon>home</mat-icon>
<mat-icon fontSet="material-icons-outlined">home_outlined</mat-icon>
<mat-icon fontSet="material-icons-two-tone">home</mat-icon>
<mat-icon fontSet="material-icons-round">home</mat-icon>
<mat-icon fontSet="material-icons-sharp">home</mat-icon>

Demo

Sample icon declarations for the variations.

  <mat-icon>home</mat-icon>
  <mat-icon fontSet="material-icons-outlined">home_outlined</mat-icon>
  <mat-icon fontSet="material-icons-two-tone">home</mat-icon>
  <mat-icon fontSet="material-icons-round">home</mat-icon>
  <mat-icon fontSet="material-icons-sharp">home</mat-icon>