material-icons

Material Icons

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

This package contains only the icon font and required CSS. So it is considerably smaller than the official material-design-icons package and easy to install.

• Installation
• Usage
• Available Icons

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">home</span>

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

<span class="material-icons-outlined">home</span>
<span class="material-icons-round">home</span>
<span class="material-icons-sharp">home</span>
<span class="material-icons-two-tone">home</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;
$material-icons-font-display: block !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-home"></span>

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

<span class="mi-outlined mi-home"></span>
<span class="mi-round mi-home"></span>
<span class="mi-sharp mi-home"></span>
<span class="mi-two-tone mi-home"></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-home {
  @include material-icon('home');
}

Available Icons

See demo.