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>