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>

`mat-icon` -> `md-icon`, prior to the release yesterday it was the preferred route to import `MdIconModule` rather than `MatIconModule` as well. — Z. Bagley, Oct 08 '17 at 16:21
Side note... did you make sure to include the actual fonts (and not just the css) http://google.github.io/material-design-icons/#icon-font-for-the-web? — Z. Bagley, Oct 08 '17 at 16:24

score 29 · Answer 1 · answered Apr 19 '18 at 15:00

29

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

answered Apr 19 '18 at 15:00

Chris Fremgen

4,649
1
26
26

score 7 · Answer 2 · answered Feb 22 '19 at 14:25

7

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

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

answered Feb 22 '19 at 14:25

headmelon

83
1
6

score 5 · Answer 3 · answered Jun 09 '18 at 20:42

5

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

answered Jun 09 '18 at 20:42

jenson-button-event

18,101
11
89
155

1

Worked for me. `.material-icon` if you're using past today. – Alexander Kleinhans Apr 25 '19 at 15:32
Strangely for me just icons with underscore were not working, but this fixed it. Thanks! – seawave_23 Nov 26 '20 at 10:51

score 2 · Answer 4 · answered Nov 05 '17 at 11:52

2

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

@NgModule({
  imports: [
    MatIconModule
  ]
})

answered Nov 05 '17 at 11:52

Dung-Tri LE

31
4

Hamed Baatour · Answer 5 · 2017-10-08T19:51:09.273

1

consider using google CDN instead by adding the following to your index.html:

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

Edit:

move/download the CSS file and place it in your assets folder and then in your angular-cli.json you add the following to your styles array:

"../src/assets/material-icons.css"

edited Oct 08 '17 at 19:51

answered Oct 08 '17 at 15:44

Hamed Baatour

6,664
3
35
47

score 0 · Answer 6 · answered Sep 06 '18 at 18:35

Ran into this in Angular 6, solution ended up being adding mat-icon-button,

<button mat-icon-button type="button" 
    (click)="yourMethod()">
    <mat-icon>delete</mat-icon>
</button>

Make sure you add MatIconModule to your app.module.ts imports and it should work like a charm.

score 0 · Answer 7 · answered Oct 22 '18 at 03:13

0

Check your console for miscellaneous errors.

If you have a miscellaneous error in your component it could be preventing your mat-icon from initializing properly and you'll just see the textual representation of the glyph instead.

answered Oct 22 '18 at 03:13

Simon_Weaver

140,023
84
646
689

score 0 · Answer 8 · answered Jul 24 '22 at 16:14

0

I faced same issue, instead of icon "close" text was coming for me. It was internet issue , internet was slow so maticon module was not loaded properly. Reconnecting with good network strength solved my issue.

answered Jul 24 '22 at 16:14

harsh

1

Material icon not rendering properly

8 Answers8