CODEWITHSUNDEEP
angularangular-materialgoogle-material-icons
dhana
dhana

Reputation: 887

Material icon not rendering properly

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>

Upvotes: 25

Views: 36368

Answers (8)

harsh
harsh

Reputation: 1

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.

Upvotes: 0

headmelon
headmelon

Reputation: 83

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

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

Upvotes: 7

Simon_Weaver
Simon_Weaver

Reputation: 145880

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.

Upvotes: 0

GoranSu
GoranSu

Reputation: 569

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.

Upvotes: 0

jenson-button-event
jenson-button-event

Reputation: 18941

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

Upvotes: 5

Chris Fremgen
Chris Fremgen

Reputation: 5358

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

Upvotes: 29

Dung-Tri LE
Dung-Tri LE

Reputation: 31

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

@NgModule({
  imports: [
    MatIconModule
  ]
})

Upvotes: 2

Hamed Baatour
Hamed Baatour

Reputation: 6922

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"

Upvotes: 1

Related Questions