Angular Material icons not working

Question

I've installed Material for angular,

I've imported on my app module MatIconModule (with import { MatIconModule } from '@angular/material/icon';)

I've added it under my ngmodule imports with:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

I've imported all stylesheets

And I've also imported it in my app component that is actually (trying to) using them (with another import {MatIconModule} from '@angular/material/icon'; line at the beginning of it).

But material icons still not appear.

For example, with this line:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

I'm expecting something like this:

But i get this:

Got any suggestion?

after performing the solutions from below , you should clear browser cache . it worked for me . — Aditya Yada, Aug 18 '20 at 20:35
npm i material-icons --legacy-peer-deps then : @import "~material-icons/iconfont/material-icons.css"; works For erevryone — reza hrkeng, Aug 09 '23 at 06:59

score 342 · Accepted Answer · edited Jul 31 '21 at 11:15

342

Add CSS stylesheet for Material Icons!

Add the following to your index.html:

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

Refer - https://github.com/angular/material2/issues/7948

edited Jul 31 '21 at 11:15

Zoe

27,060
21
118
148

answered Apr 12 '18 at 12:17

Basavaraj Bhusani

5,375
2
16
24

21

This answer worked for me but I was also able to add this line to the styles.css and it worked. ```@import 'https://fonts.googleapis.com/icon?family=Material+Icons';``` – J. Chaney Feb 08 '19 at 17:59
36

You can also add: `@import "~material-icons/iconfont/material-icons.css";` to your styles.css – Pooshon Banerjee Apr 02 '19 at 12:15
8

@PooshonBanerjee material-icons is a separate project not maintained by the Angular Material team. – Vedran Jun 04 '19 at 15:15
Often not enough. What people forget is: import { MatIconModule } from '@angular/material/icon'; imports: [ BrowserModule, MatIconModule, ................ ], – Wojciech Marciniak Dec 10 '22 at 03:01
To complement your answer, this font could be installed using npm at this link: https://www.npmjs.com/package/material-icons Then is necessary to import css: @import 'material-icons/iconfont/material-icons.css'; or – Leandro Castro Jul 28 '23 at 14:32

score 91 · Answer 2 · edited Apr 09 '20 at 09:54

91

For Angular 6+:

npm install this: npm install material-design-icons

add the styles to angular.json:

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

edited Apr 09 '20 at 09:54

Wilt

41,477
12
152
203

answered Sep 09 '19 at 17:57

katwhocodes

2,188
1
22
24

5

This is the proper angular way to do it! – Wilt Apr 09 '20 at 09:55
1

...and the proper way to do it when using Angular for Apps (like with Cordova) – CularBytes Apr 12 '20 at 18:12
This works for me. Instead of using google api, I install material design. – Max Nov 12 '20 at 00:25
+1 I like that this approach makes use of a library, but also good to note that the library doesn't seem to fully support all the icons listed in Googles official docs https://fonts.google.com/icons?icon.set=Material+Icons – Nathan Beck Jan 31 '23 at 16:25
I left my laptop until the next day to finish the npm install for this library.. – Snowbases May 11 '23 at 15:57
Note that the npm install will take a while to complete. Just be patient. – VictorEspina Aug 01 '23 at 21:17
Instead of downloading the entire dev environment for icons, use `npm i material-design-icons-iconfont`. Much quicker. – ad450 Aug 11 '23 at 17:08

score 40 · Answer 3 · answered Nov 04 '19 at 21:47

40

In my case, there was a style applied that overrides font family. So, I added font family style explicitly like this:

.material-icons{
    font-family: 'Material Icons' !important;
}

answered Nov 04 '19 at 21:47

gradosevic

4,809
2
36
51

This was the answer for me! I just removed the font-family that was blocking it though instead of adding the !important – AylaWinters Jul 29 '22 at 17:57
I had the same issue because of a brutal overriding I write to change all fonts of my app ! The good solution was the removal of this CSS class and its integration in the body class. It is not a very good idea to add more overriding... – Thibault Sep 12 '22 at 20:46

Vedran · Answer 4 · 2020-04-28T11:13:21.810

If using SASS you only need to add this line to your main .scss file:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

If you prefer to avoid fetching icons from google you can also self-host the icons as described in Material Icons Guide:

For those looking to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule:
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Faced the issue when icon was not rendering and instead Close text was displaying. Appended the above import in my scss file and it started displaying the 'X' icon. Thanks :) — vinsinraw, Dec 16 '19 at 12:25
I have angular 9 project and after import material icon font file in .scss, still same issue, material icon is not visible, it is displaying test 'visibility_off' in .apk file created using cordova. but same is working fine in localhost:4200 So there any other solution of it? — Jignesh Gothadiya, Sep 08 '20 at 11:26

score 13 · Answer 5 · answered Feb 28 '19 at 22:01

13

You must import MatIconModule and use the following url in index.html

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

answered Feb 28 '19 at 22:01

Khabir

5,370
1
21
33

Mahadi Hassan Babu · Answer 6 · 2022-05-31T09:32:03.230

12

At first install angular material using -
```
npm i @angular/material  
```

In style.css file just copy and paste -

  @import "https://fonts.googleapis.com/icon?family=Material+Icons";

Then go to app.module.ts follow the below instruction -

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

 imports: [
        BrowserModule,
        MatIconModule,
        ................
       ],

In app.component.html file just copy and paste below code -
```
     <mat-icon>home</mat-icon>
```
And boom. It works for me. I hope, it will help you.

edited May 31 '22 at 09:32

answered May 29 '22 at 20:21

Mahadi Hassan Babu

381
4
7

this is the latest working solution. Yet, css step is not necessary as I checked in index.html head, it is added automatically on installation – Phoebe Dec 27 '22 at 04:53

score 11 · Answer 7 · answered Jun 18 '19 at 19:17

11

The full solution can be :

Step one

You have to import MatIconModule in your project, in my project I import the necessary component in a separate file then I import it in the AppModule, you can use this or import them directly :

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Step two

Load the icon font in your index.html :

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

answered Jun 18 '19 at 19:17

Youcef LAIDANI

55,661
15
90
140

Step two would not be necessary because when I installed the module, that link is added automatically into my index.html. In my case, it is the syntax using mat-icon in component.html: NOT WORKING: ...... WORKING: home – Phoebe Dec 27 '22 at 04:50
I find like I'm trying do a "where's Waldo?", with the imports for Material modules. Of course, it's *obvious* now, that MatButtonToggleModule should be imported from '@angular/material/button-toggle', but it actually *isn't*. Folks at @angular/material just have ONE import that imports all material objects, and the end programmer can pick and choose which ones to use.. – Gino Apr 05 '23 at 22:18

Mohammad Reza Mrg · Answer 8 · 2022-12-08T14:33:00.660

5

First, please consider that you need to insert style into the project:

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

If the problem didn't solved, I guess you are using another font, also added !important for the font, please try to add this css class in to style.css (or style.scss) which is the general/public CSS :

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

refer to this answer: https://github.com/angular/components/issues/5863#issuecomment-316307387

edited Dec 08 '22 at 14:33

answered Jul 31 '21 at 11:14

Mohammad Reza Mrg

1,552
15
30

1

should be mat-icon instead of md-icon – Omar Salem Sep 03 '22 at 04:40

score 4 · Answer 9 · answered Jun 23 '19 at 00:23

4

In my case the icons did not show up because I has screwed up my fonts by using !important. Taking that out caused the icons to appear.

answered Jun 23 '19 at 00:23

Marc Schluper

79
3

score 4 · Answer 10 · answered Jul 18 '19 at 16:30

4

In my case, the icon name I wrote wasn't associated to any icon.

You can check the correct names here: https://material.io/tools/icons/?style=baseline

answered Jul 18 '19 at 16:30

Francesco Ambrosini

481
6
21

score 4 · Answer 11 · answered Jan 28 '21 at 08:21

You can import Material icons in two ways. one is to import the icon in the main index.html page in your project.

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

The other way is to import Material icons to the main CSS file as following you can see.

 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");

My opinion is to add it to CSS file.

score 3 · Answer 12 · answered Mar 10 '22 at 23:18

Make sure you're not overriding the default font-family: 'Material Icons'; with stronger CSS selector such as:

* :not(i){
    font-family: Nunito !important;
}

The above CSS example would change the font for <mat-icon> elements, and they will show text instead of icons.

score 2 · Answer 13 · answered Apr 20 '19 at 21:29

I realized no one spoke about installing hammerJs at first before importing it to your app. Well for people who have a similar issue you need to import hammerJs at first, you can use either NPM, Yarn or google CDN for the installation. This answer is for installation with either NPM or Yarn:

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

If you prefer to use Google CDN kindly visit the Angular material for more explanation https://material.angular.io/guide/getting-started

hammerjs (https://hammerjs.github.io/) adds touch gesture... it should not change anything about icons' angular module or style. If it does it would be a border effect that I would not rely upon. — loic.jaouen, Oct 14 '22 at 09:15

score 2 · Answer 14 · answered Aug 23 '19 at 02:35

I ran into the issue of icons not displaying for me. I had followed the steps provided by Basavaraj Bhusani however still not working.

I found the issue was that in my scss, I had the text-transform: uppercase which was causing the icon to just display the content 'arrow_forward'. I had to change the text-transform: none on the icon specifically otherwise it would not render.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Pejman Saberin · Answer 15 · 2020-08-18T23:30:10.747

If you have overwritten some existing Angular Material styling or any other styling that somehow affects the icon, it may cause an issue. Move the icon code outside of any styling and test.

For me it was font-variant: small-caps;

So I just moved it to the child element. Below is part of Angular Material grid.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

score 1 · Answer 16 · answered Oct 15 '20 at 12:31

Wrong Icon Name : Some Material Icon name is wrong.

For example : Material Icon provides filter_alt for

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

but it shows up

Fix : we have to use filter_list_alt for funnel type icon as

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

score 1 · Answer 17 · answered Jun 06 '22 at 11:41

I was able to solve my issue by going to the link directly (https://fonts.googleapis.com/icon?family=Material+Icons) and copying the CSS (which is)

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v129/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Put this CSS into your site's main style file at the very top. Cheers.

score 1 · Answer 18 · answered Jul 27 '22 at 06:32

1

Make sure that you are using the correct documentation.

Version 13.3.9:

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

Version 14.1.0:

<mat-icon fontIcon="home"></mat-icon>

answered Jul 27 '22 at 06:32

ailtonbsj

191
1
10

score 0 · Answer 19 · answered Sep 09 '22 at 21:34

0

My problem was that the default icon class had been changed in app.module.ts by using MatIconRegistry.setDefaultFontSetClass, so my <mat-icon> was not getting the material-icons class applied to it. Read more about this function here

answered Sep 09 '22 at 21:34

Homer

7,594
14
69
109

score 0 · Answer 20 · answered Oct 18 '22 at 22:19

0

I tried everything mentioned here. What worked for me was on my dev machine enable proxy server under LAN settings.

answered Oct 18 '22 at 22:19

Aditya Bhouraskar

11
3

score 0 · Answer 21 · answered Nov 16 '22 at 07:47

0

Crazy stuff. Tried all above solutions but the Home icon never appeared. What worked is, changing the text inside <mat-icon> from "Home" (observe the capital 'H' to "home" with small case 'h' worked for me.

answered Nov 16 '22 at 07:47

Everyday Learner

1

score 0 · Answer 22 · answered Jan 09 '23 at 10:47

0

For me it was not working because I did not imported the Material module in app.modules.ts file.

I just added MatIconModule in the declaration of the parent module file and it worked.

answered Jan 09 '23 at 10:47

Mukesh Soni

76
6

score 0 · Answer 23 · edited Mar 31 '23 at 07:30

0

Angular 15 FAIL.

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

worked.

edited Mar 31 '23 at 07:30

E_net4

27,810
13
101
139

answered Mar 31 '23 at 05:08

coelo physis

31
3

score 0 · Answer 24 · answered May 04 '23 at 18:05

0

My version of this was caused by the DuckDuckGo browser extension. Once I disabled it for my target site the icons started working again.

answered May 04 '23 at 18:05

Justin Morrison

459
4
18

score 0 · Answer 25 · answered Jun 12 '23 at 13:26

0

add this code: <link href="https://fonts.googleapis.com/iconfamily=Material+Icons"rel="stylesheet"/>

to: index.html file

answered Jun 12 '23 at 13:26

Naor Yael

69
4

Rajeev Kumar · Answer 26 · 2023-01-06T04:47:17.613

-1

Create preview-head.html inside in .storybook folder and add this link [][1]

edited Jan 06 '23 at 04:47

answered Jan 05 '23 at 07:10

Rajeev Kumar

1
2

score -2 · Answer 27 · answered Apr 08 '19 at 12:00

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

Angular Material icons not working

27 Answers27

Linked

Related