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!
Google's Material Icons provides a long list of icons. Choose any one of them and add the name of the icon class to any HTML element within the < body > tag. In the following example, we have used the icon named accessibility that belongs to the action category.
The complete set of material icons are available on the material icon library. The icons are available for download in SVG or PNGs, formats that are suitable for web, Android, and iOS projects or for inclusion in any designer tools.
Angular Material Icons are a set of prebuilt icons that can be easily imported into the app. Except for the bitmap-based formats ie., png, jpg, etc, this directive can support both icon fonts and SVG icons.
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.
Instructions on how to include Material Design Icons into your Angular Material app can now be found on the Material Design Icons - Angular documentation page.
TL;DR: You can now leverage the @mdi/angular-material
NPM package which includes the MDI icons distributed as a single SVG file (mdi.svg
):
npm install @mdi/angular-material
This SVG file can then be included into your app by including it in your project's assets
configuration property in angular.json
:
{
// ...
"architect": {
"build": {
"options": {
"assets": [
{ "glob": "**/*", "input": "./assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "./", "output": "./" },
{ "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
]
}
}
}
// ...
}
Your app's main module will also need the necessary imports (HttpClientModule
from @angular/common/http
used to load the icons and MatIconModule
from @angular/material/icon
) to be declared, as well as adding the icon set to the registry:
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@NgModule({
imports: [
// ...
HttpClientModule,
MatIconModule
]
})
export class AppModule {
constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
iconRegistry.addSvgIconSet(
domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
);
}
}
A StackBlitz demo is also now available.
The steps for older versions of Angular are as mentioned below:
Simply follow these steps:
Download mdi.svg
from here under the Angular Material section and place it in your assets
folder, which should be located at (from your project's root) /src/assets
:
In your app's module (aka app.module.ts
), add the following lines:
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
...
export class AppModule {
constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));
}
}
Make sure to include assets
folder under .angular-cli.json
in assets
(Although by default, it will be there):
{
"apps": [
{
...
"assets": [
"assets"
]
}
]
}
Finally, use it via the MatIcon
component with the svgIcon
input:
<mat-icon svgIcon="open-in-new"></mat-icon>
Install npm package
npm install material-design-icons --save
npm install --save @angular/material @angular/cdk
Add material icons css to your .angular-cli.json (don't forget to restart "ng serve")
{
"apps": [
{
"styles": [
"node_modules/material-design-icons/iconfont/material-icons.css"
]
}
]
}
or in your src/styles.scss
@import '~material-design-icons/iconfont/material-icons.css';
Import module in your app.module.ts
import { MatIconModule } from '@angular/material/icon';
...
@NgModule({
imports: [
...,
MatIconModule
],
And use it like that:
<mat-icon>location_off</mat-icon>
Pick the name from Material Design Icons => https://material.io/tools/icons/?style=baseline
Similar to the answer by @creep3007, you can specify the stylesheet in your .angular-cli.json
:
Install npm package
npm install material-design-icons --save
Add material icons to your .angular-cli.json
{
"apps": [
{
"styles": [
"../node_modules/material-design-icons/iconfont/material-icons.css"
]
}
]
}
Use it
<i class="material-icons">visibility</i>
Note this answer applies to the Material Design Icons by Templarian and NOT the icons of the same name by Google. I don't understand why these instructions aren't in the Readme, but here you go.
First, install the package:
npm install @mdi/font --save
Then, it is necessary to add the stylesheet to your styles.scss
file. I added the following to the end of my file:
//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";
Note the $mdi-font-path
is necessary to override a default set within the @mdi/font/scss/_variables.scss
which causes the webpack compiler to complain. If you forget to do this, you will get a series of errors, as follows:
ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Module not found: Error: Can't resolve '../fonts/materialdesignicons-webfont.eot' in '/home/myRepo/myApp'
Edit: I'm not sure if this is necessary (it probably is in some cases), but I also updated the .angular-cli.json
file styles
element:
"styles": [
"../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",
Another alternative to the above, which resulted in the icons working with very little effort, was to import the CSS directly. In the typescript file, I replaced the styleUrls
element (to avoid a strange bug with Karma):
// styleUrls: ['./graphics-control.component.css'],
styles: [require('./my.component.css'),
require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]
With Bootstrap 4 & Angular this works:
1) Run:
npm install material-design-icons --save
2) Add to styles.css or styles.scss
@import '~material-design-icons/iconfont/material-icons.css';
3) Go to: ..\node_modules\material-design-icons\iconfont\material-icons.css and make sure the section is exactly like this ('MaterialIcons-Regular.woff2')...:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('MaterialIcons-Regular.woff2') format('woff2'),
url('MaterialIcons-Regular.woff') format('woff'),
url('MaterialIcons-Regular.ttf') format('truetype');
}
4) Use icon in html:
<i class="material-icons">visibility</i>
Base on @theMayer answer, there is my version to make it work for package @mdi/font
.
1- npm install @mdi/font --save
2- In angular.json
, under architect/buid/options/styles
, add "node_modules/@mdi/font/css/materialdesignicons.min.css"
3- In src\app\app.module.ts
add import { MatIconModule } from '@angular/material/icon';
and add MatIconModule
in imports
section
4- In src\styles.scss
add:
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";
5- Add the icon in your html using mat-icon, for example:
<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With