Angular-cli: How to use material icons from local folder/path of project??

[kushwahashiv]

How to use material icons from local folder/path of project??

[grizzm0]

This is an issue tracker. Please post any questions at stackoverflow.

[tomwanzek]

@kushwahashiv If you choose not to use the hosted icon font, as you need them to work e.g. offline, there is a github repo with the icon fonts in it: material icon fonts.

You have a couple of options:

(1) npm install the entire material-design-icons package (generally suggested, but sizable package as I recall)
(2) Manually download the fonts and material-icons.css into a folder in your project, e.g. extrafonts (This is more of a quick and dirty during dev iterations, I reckon)

Importantly, if you are using the second approach, the extrafonts folder should not be copied underneath the assets folder, as the fonts would then be copied over to dist as part of the build process.
Rather, create a sibling-folder to the app folder.

Under either acquisition scenario, you will need to add material-icons.css to your styles in angular-cli, e. g.:

"styles": [
        "./extras-fonts/material-design-icons/material-icons.css",
        "styles.css",
      ],

For option 1 use the reference to the respective node_modules containing the css-file. Bringing this file in, will grant you locally hosted access to the icons, e.g. using <md-icon> in conjunction with the icon literal. Angular-cli will include them into the build process.

[kushwahashiv]

@tomwanzek thanks for the suggestion but that is not what I'm looking for but to keep in node_modules.

[grizzm0]

npm install material-design-icons

angular-cli.json

{
  "apps": [
    {
      "styles": [
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

webpack will automatically copy over all the fonts, give them unique names and replace all occurrences in the style.

[filipesilva]

Closed as it seems to be resolved. Thanks for the helpful comments!

[gtzinos]

Hello, npm install material-design-icons --save stuck during the installation.

[tomwanzek]

@gtzinos see Issue 518 at Material Design Icons. I opened the issue last November to absolutely no avail, I am afraid. There is a work around, as suggested in this comment. Although, clearly having the underlying issue 518 fixed would be much preferred.

In any case, there is no angular-cli issue underlying your experience. All is great on this front. 😄

[manbearwiz]

Alternatively to @grizzm0's solution, if you are using scss, after you install material-design-icons, just add the following to your main styles.scss

@import "~material-design-icons/iconfont/material-icons.css";

[rsaenen]

Alternatively to @grizzm0's solution, if you are using scss, after you install material-design-icons, just add the following to your main styles.scss
@import "~material-design-icons/iconfont/material-icons.css";

Importing css with sass is deprecated.

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

This is fine with @angular/cli@^6.0.0 ;)

[schitzN]

Update for angular 6: Add the path to the material-icon.css to angular.json and not to angular-cli.json!

"projects": { "YOUR-PROJECT-NAME": { "architect": { "build": { "options": { "styles": [ {"node_modules/material-design-icons/iconfont/material-icons.css"

[Polyterative]

not to angular-cli.json!

@schitzN
Why not? Is there a reason?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}