How to add material icons

3
votes

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.

1
angulargoogle-material-icons

1 Answers

6
votes

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

  1. Reference into app.module
import {MatIconModule} from '@angular/material/icon';
  1. use it now
<mat-icon>face</mat-icon>

Demo :

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