material-icons

Material Icons

Material design icon font and CSS framework for self hosting the icons.

• Installation
• Usage
• Available Icons

Installation

Install the latest version using:

npm install material-icons@latest

Usage

Fonts are located in the iconfont directory and can be imported using CSS:

<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">

To display an icon, use:

<span class="material-icons">pie_chart</span>

To display outlined, round, sharp and two-tone icons, use:

<span class="material-icons-outlined">pie_chart</span>
<span class="material-icons-round">pie_chart</span>
<span class="material-icons-sharp">pie_chart</span>
<span class="material-icons-two-tone">pie_chart</span>

For more advanced usage, see:

Import using build tools

If you are using webpack, Create React App or Vue CLI, import CSS in src/index.js or src/main.js:

import 'material-icons/iconfont/material-icons.css';

If you are using Angular CLI, import CSS in src/styles.css:

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

Display using Angular mat-icon

To display an icon, use:

<mat-icon>pie_chart</mat-icon>

To display outlined, round, sharp and two-tone icons, use:

<mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
<mat-icon fontSet="material-icons-round">pie_chart</mat-icon>
<mat-icon fontSet="material-icons-sharp">pie_chart</mat-icon>
<mat-icon fontSet="material-icons-two-tone">pie_chart</mat-icon>

Customize using Sass

To customize the build, import Sass instead of CSS:

@import 'material-icons/iconfont/material-icons.scss';

Available Sass variables:

$material-icons-font-path: './' !default;
$material-icons-font-size: 24px !default;
$material-icons-font-display: block !default;

If you are getting errors with webpack or Vue CLI, add this line before importing above Sass file:

$material-icons-font-path: '~material-icons/iconfont/';

CSS Classes

Note: This method is not recommended as it requires an additional large CSS file.

Alternatively, you may use CSS classes to display icons by importing additional CSS:

<link href="/path/to/material-icons/css/material-icons.css" rel="stylesheet">

To display an icon, use:

<span class="material-icons mi-pie-chart"></span>

To display outlined, round, sharp and two-tone icons, use:

<span class="material-icons-outlined mi-pie-chart"></span>
<span class="material-icons-round mi-pie-chart"></span>
<span class="material-icons-sharp mi-pie-chart"></span>
<span class="material-icons-two-tone mi-pie-chart"></span>

For more advanced usage, see:

Import using build tools

If you are using webpack, Create React App or Vue CLI, import CSS in src/index.js or src/main.js:

import 'material-icons/css/material-icons.css';

If you are using Angular CLI, import CSS in src/styles.css:

@import 'material-icons/css/material-icons.css';

Display using Angular mat-icon

To display an icon, use:

<mat-icon fontIcon="mi-pie-chart"></mat-icon>

To display outlined, round, sharp and two-tone icons, use:

<mat-icon fontSet="material-icons-outlined" fontIcon="mi-pie-chart"></mat-icon>
<mat-icon fontSet="material-icons-round" fontIcon="mi-pie-chart"></mat-icon>
<mat-icon fontSet="material-icons-sharp" fontIcon="mi-pie-chart"></mat-icon>
<mat-icon fontSet="material-icons-two-tone" fontIcon="mi-pie-chart"></mat-icon>

Customize using Sass

To customize the build, import Sass instead of CSS:

@import 'material-icons/css/material-icons.scss';

Available Sass variables:

$material-icons-css-prefix: 'mi' !default;
$material-icons-css-search: '_' !default;
$material-icons-css-replace: '-' !default; // Replaces '_' with '-' in CSS classes

Available Icons

See demo.

License

Material design icons are created by Google.

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required. The only thing we ask is that you not re-sell these icons.