Note: Please use the main MaterialDesign repo to report issues. This repo is for distribution of the Angular Material files only.
Angular Material - Material Design Icons
Angular Material distribution for the Material Design Icons.
@mdi/angular-material from npm:
npm install @mdi/angular-material
This bundle is usable with AngularJS Material/Angular Material and to facilitate usage, it's recommended to use
Add the following plugin configuration in the Webpack configuration:
from: 'node_modules/@mdi/angular-material/mdi.svg'to: 'assets/mdi.svg';
Or if you're using Angular CLI:
For Angular CLI version 1.x, make sure to include
For Angular CLI version 6.x, make sure to include
assetsarray, located in the build configuration for your project:
Note: To check your version of Angular CLI, run
ng -v or
$(npm bin)/ng -v.
mdi.svg contains all the icons provided on the site. Use inline with MatIconRegistry.
- Place the SVG file under your
assetsfolder thanks to Angular CLI or thanks to
CopyWebpackPlugin. Please ensure that this file is publicly accessible.
- In your app's main module (typically
<!-- Icon by itself --><!-- Icon button --><!-- You can also combine an icon and text together -->View source
Please also add the following class to your styles (
styles.css) to solve the problem where an icon isn't aligned properly when used in a menu item:
For more information on icons, refer to the icon docs.
mdi.svg contains all the icons provided on the site. Use inline with
var app = angular;app;