How to include material icon library in angular?

问题

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

回答1:

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

回答2:

Try to post this code in your index.html :

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

回答3:

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

来源：https://stackoverflow.com/questions/52536410/how-to-include-material-icon-library-in-angular

标签

angular

angular-material