How to include material icon library in Angular?

Question

(I refer this link Issue #2662 for that), 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">

Sandro De Marco · Accepted Answer

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

Dharmesh · Answer

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

mecab1995 · Answer

Try to post this code in your index.html :

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

Donate For Us