Using Material Icons with Angular Material

Photo by Harpal Singh on Unsplash

Scenario

We want to use the material icons in our Angular project.

Tools

Approach

Just add this link to the header section of src/index.html :

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

Then declare the icon like this:

<mat-icon>delete</mat-icon>

Bonus

Want to use the same icons with Materialize. Just include the same link element. Then create a red error icon like this:

<i class="material-icons red-text">error</i>