angularangular-materialangular-material2

Reputation:

Angular Material icons not working

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?

Upvotes: 194

Answers (28)

Mohammad Reza Mrg

Reputation: 2033

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 with !important in your style, 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

Upvotes: 11

EACUAMBA

Reputation: 601

Just install the material-icons package

yarn add material-icons
or
npm install material-icons

then import the css in your styles.scss

@import 'material-icons/iconfont/material-icons.css';

to use just use the class

<span class="material-icons">pie_chart</span>          <!-- Filled -->
<span class="material-icons-outlined">pie_chart</span> <!-- Outlined -->
<span class="material-icons-round">pie_chart</span>    <!-- Round -->
<span class="material-icons-sharp">pie_chart</span>    <!-- Sharp -->
<span class="material-icons-two-tone">pie_chart</span> <!-- Two Tone -->

the library repo link is Material Icons by @marella

Upvotes: 2

Naor Yael

Reputation: 139

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

to: index.html file

Upvotes: 0

Justin Morrison

Reputation: 587

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

Upvotes: 0

coelo physis

Reputation: 51

Angular 15 FAIL.

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

worked.

Upvotes: 1

Mukesh Soni

Reputation: 129

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.

Upvotes: 0

Rajeev Kumar

Reputation: 1

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

Upvotes: -1

Everyday Learner

Reputation: 1

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.

Upvotes: 0

Aditya Bhouraskar

Reputation: 21

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

Upvotes: 0

Homer

Reputation: 7806

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

Upvotes: 0

ailtonbsj

Reputation: 350

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>

Upvotes: 1

AtLeastTheresToast

Reputation: 387

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.

Upvotes: 1

Mahadi Hassan Babu

Reputation: 511

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.

Upvotes: 15

Lorraine Ram-El

Reputation: 2745

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.

Upvotes: 3

Basavaraj Bhusani

Reputation: 5673

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

Upvotes: 366

Sandun Susantha

Reputation: 1140

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.

Upvotes: 4

Muhammad Abdullah

Reputation: 4465

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>

Upvotes: 1

Pejman Saberin

Reputation: 69

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>

Upvotes: 1

Vedran

Reputation: 11029

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

Upvotes: 36

katwhocodes

Reputation: 2268

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"
]

Upvotes: 96

gradosevic

Reputation: 5056

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

Upvotes: 47

srunner

Reputation: 31

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

                    }

Upvotes: 2

Francesco Ambrosini

Reputation: 501

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

Upvotes: 5

Marc Schluper

Reputation: 89

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.

Upvotes: 5

Youcef LAIDANI

Reputation: 59950

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">

Upvotes: 11

Oluwagbemi Kadri

Reputation: 469

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

Upvotes: 2

Lekh Raj

Reputation: 80

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

Upvotes: -2

Khabir

Reputation: 5844

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

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

Upvotes: 13

Angular Material icons not working

Answers (28)

Related Questions