Skip to content
Material design icon font and CSS framework for self hosting the icons.
CSS JavaScript
Branch: master
Clone or download
Latest commit 7620536 Apr 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add css classes and update documentation Mar 27, 2018
iconfont Update font files Apr 4, 2019
scripts Add css classes and update documentation Mar 27, 2018
.editorconfig first commit Aug 16, 2015
.gitignore first commit Aug 16, 2015
CREDITS.md Add iconfont and remove css classes Mar 22, 2018
LICENSE Add iconfont and remove css classes Mar 22, 2018
README.md Update font files for new icons Dec 27, 2018
_config.yml Change github pages theme Mar 25, 2018
package-lock.json 0.3.1 Apr 4, 2019
package.json 0.3.1 Apr 4, 2019

README.md

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.

You can’t perform that action at this time.