How to use Material Design Icons In Angular 4?
I want to use the icons from https://materialdesignicons.com/ in my angular 4 project.
The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started)
How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve?
NOTE: I already Included the google material icons which are different!
Answer
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.