Material Icons CSS

Use text to create icons is nice, but when you have to get compatbility with old browsers, it is not so nice.

Material Icons CSS allows to use classname instead of text for icons.

Quick Start

Download lib

npm install material-icons-css

or

bower install material-icons-css

Insert into your HTML :

<link rel="stylesheet" href="your-css-folder/material-icons.min.css"/>

Before :

<i class="material-icons">check</i>
<i class="material-icons">add</i>

After :

<i class="material-icons material-icons-check"></i>
<i class="material-icons material-icons-add"></i>

"material-icons-" ??? What is this UGLY prefix ???

Some Material Design Icons' name are starting with numerics :

• .3d-rotation is NOT allowed
• .such-prefix-3d-rotation is.

"material-icons-" IS STILL UGLY !!!

You can change the prefix at line 3, into scss\style.scss.

Once, you have made your changes, type into your console (at root project) :

• npm i to install dependencies
• gulp to regenerate CSS files

Licence

All rights reserved to Google

Original github page : material-design-icons

Author : Jacques Cornat