How to include material icon library in angular?

11
votes

(i refer this link for that https://github.com/angular/angular-cli/issues/2662), I add CSS in angular.json and import library instyle.css (it gives an error like ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)), what is the proper way to install material icon library in the local project in angular? 

npm install material-design-icons-iconfont --save

angular.json

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

style.css

@import "~material-design-icons-iconfont/dist/material-design-icons";

index.html

<link href="../material-design-icons-iconfont/dist/fonts/" rel="stylesheet">
4
angularangular-material
might be related to path issue. "styles": [ "src/styles.css", "./node_modules/material-design-icons/iconfont/material-icons.css", ], - Suresh Kumar Ariya
did you trying importing the css file in index.html using link tag? - Suresh Kumar Ariya
please try and let me know - Suresh Kumar Ariya
Did you include MatIconModule in imports of your Module? - User3250
You need to load css file right? <link href="../node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">. Try this code - Suresh Kumar Ariya

4 Answers

23
votes

using this link resolved my problem(https://www.npmjs.com/package/material-icons)

npm i material-icons

styles.css

@import '~material-icons/iconfont/material-icons.css';
3
votes

First install via npm the material-icon package:

npm install material-icons --save

Then import the CSS library on your Angular project editing the angular.json file:

 "styles": [
        "src/styles.css",
        "node_modules/material-design-icons/iconfont/material-icons.css",
    ]
0
votes

Try to post this code in your index.html :

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

Just wanted to share my experience in solving this. Actually I used !important for my fonts at some stage and later realized my icons were not working. Once removing important my issue was resolved and it started working again.

NOTE: Don't use !important unless really necessary and you know what you are doing