Angular Material icons not working
AngularAngular MaterialAngular Material2Angular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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">
Solution 2 - Angular
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" ]
Solution 3 - Angular
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'; > } >
Solution 4 - Angular
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;
}
Solution 5 - Angular
You must import MatIconModule and use the following url in index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Solution 6 - Angular
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">
Solution 7 - Angular
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.
Solution 8 - Angular
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
Solution 9 - Angular
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");
Solution 10 - Angular
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';
}
Solution 11 - Angular
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.
Solution 12 - Angular
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
Solution 13 - Angular
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>
Solution 14 - Angular
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 it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:
md-icon{
font-family: 'Material Icons' !important;
}
refer to this answer: https://github.com/angular/components/issues/5863#issuecomment-316307387
Solution 15 - Angular
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>
Solution 16 - Angular
**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';
}