How to use Material Design Icons In Angular 4?

For those who prefer to use SCSS:

Install the font

$> npm install material-design-icons

import in src/styles.scss

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

and use it in HTML as described here

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

In Order to refer to Sam Claus’ comment, thank you for this, I’ve added the installation and use of Templarian’s design icons. It is similar to the one above.

Install the font through the package manager

$> npm install @mdi/font

import the stylesheet in src/styles.scss, or in angular.json as described in the comment of A. Morel here

@import '~@mdi/font/css/materialdesignicons.css';

or using the CDN URL in index.html or wherever
and use it in HTML as described here

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

Addendum: My answer’s a little bit older. This still works fine but is no longer state of the art. The answer of A. Morel here is a bit more contemporary.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)