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';