CODEWITHSUNDEEP
angularangular-material
Dharmesh
Dharmesh

Reputation: 6003

How to include material icon library in Angular?

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

Upvotes: 22

Views: 48252

Answers (5)

iamlordsandro
iamlordsandro

Reputation: 461

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

Upvotes: 12

Ste
Ste

Reputation: 685

styles.css

mat-icon {
  font-family: 'Material Icons' !important;  
}

Upvotes: 1

Wahab Shah
Wahab Shah

Reputation: 2256

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

Upvotes: 0

Dharmesh
Dharmesh

Reputation: 6003

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

Upvotes: 41

mecab1995
mecab1995

Reputation: 171

Try to post this code in your index.html :

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

Upvotes: 0

Related Questions