material-icons

Material Icons

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

Note: This package contains only the icon font and required CSS. So it is considerably small compared to the official material-design-icons package and easy to install.

Installation

Download the latest release or install using npm:

npm install material-icons

Usage

Font files are present in the iconfont directory and can be imported using CSS.

Import CSS:

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

To display an icon, use:

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

To customize the build, import Sass instead of CSS:

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

If you are using webpack sass-loader, use:

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

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

Available Sass variables:

$material-icons-codepoints: () !default; /* Sass map of icon names and codepoints */
$material-icons-font-path: '' !default;
$material-icons-font-name: 'MaterialIcons-Regular' !default;
$material-icons-font-size: 24px !default;
$material-icons-font-family: 'Material Icons' !default;

Available Sass mixins:

.material-icons {
  @include material-icons();
}

CSS Classes (Optional)

Alternatively, you may use CSS classes to display an icon.

Note: This method is not recommended as it requires a large CSS file to be imported in addition to above files. Also it might not work with some icons as Google hasn't updated codepoints for new icons.

Import CSS:

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

To display an icon, use:

<span class="mi mi-face"></span>

To customize the build, import Sass instead of CSS:

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

If you are using webpack sass-loader, use:

@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; /* To replace '_' with '-' in CSS class names */

Available Sass mixins:

.mi-face {
  @include material-icon('face');
}

Available Icons

See material design icons.