How to add material icons

Question

I'm trying to use Outlined material icons in my app. I can't seem to properly import them. I can only use the noramal filled icons. I want to be able to use outlined icons like this example.

In the example I can use the done_outline Icon. How did they import all of the icons?

In my app I installed npm install material-design-icons

and I have imported MatIconModule in my app.module.ts but I still can't use any outline icons.

Answer 1

You have two solutions.

1) First solution.

1. Link font element in your index file

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

Or outline version :

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

2. You can use it in your template

<i class="material-icons">face</i>

2) Solution with material package

1. You have to install the material package

npm install @angular/material

2. Reference into app.module

import {MatIconModule} from '@angular/material/icon';

3. use it now

<mat-icon>face</mat-icon>

Demo :

https://stackblitz.com/edit/angular-psj1hy