CODEWITHSUNDEEP
angularangular-materialicons
Wayne Kaskie
Wayne Kaskie

Reputation: 3483

Mat-icon does not show icon

I love angular material's design, but using it can be a pain. The site shows an example using 

<mat-icon>home</mat-icon>

However, when I do the same thing in my project, I just see the text "home".

I don't see where I need to do anything other than import MatIconModule.

Does anyone have a clue?

I'm using angular material v8.0.1. I also installed material-design-icons v 3.0.1. and have this in my index.html. (i did one at a time)

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Upvotes: 3

Views: 23168

Answers (3)

krmld
krmld

Reputation: 1348

In my case some icons were working, some not. Switching from 

<mat-icon>home</mat-icon>

to

<span class="material-icons">home</span>

solved the problem.

Upvotes: 4

Bipin Thakur
Bipin Thakur

Reputation: 149

Angular material 8.0.1 requires material design icons to be included as follows

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

Also you will need to import mat-icon module as

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

Then in your component template file you can use

<mat-icon>home</mat-icon>

Upvotes: 1

Hien Nguyen
Hien Nguyen

Reputation: 18975

You need remove 

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

and change to

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

Upvotes: 10

Related Questions