Material icon not rendering properly

Question

Material icon not rendering properly in my project, i installed properly but even though not showing in browser.

i followed below steps:

npm install material-design-icons

.angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

app.module.ts

import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';

app.component.html

<mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">verified_user</mat-icon>
  </mat-toolbar-row>

Answer 1

I had the same issue. Caused because I was importing the material theme before the fonts in my theme.scss.

Should be:

@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

@import '~@angular/material/theming';

Answer 2

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

make sure this has been added to your index.html.

Answer 3

I had made my own text font !important

had to make the icons more important:

.lato * {
  font-family: 'Lato' !important;
}

.mat-icon{
  font-family: 'Material Icons' !important;
}

Answer 4

I had the same issue, because I forgot to add the module on NgModule.imports :

@NgModule({
  imports: [
    MatIconModule
  ]
})