Adding Material Icons to our Angular Material Stackblitz Project | Task

Ole Ersoy
May - 05  -  2 min

Scenario

We created a new Angular Stackblitz project and added @angular/material, and we want to use the Angular Material Icons in this project.

Approach

Add the Angular Material Icons link to the top of index.html. If you just initialized a new project it should look like this after completion.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<my-app>loading</my-app>

Note that if you want all the variations ( outline, filled, rounded, sharp, two-tone) then the link must include the variations.

<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">

<my-app>loading</my-app>

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>