Material Design Iconic Font

The iconic font and CSS toolkit

Material Design Iconic Font is a full suite of material design icons (created and maintained by Google) for easy scalable vector graphics on websites.

   Download v1.0.1 (ZIP)
Version 1.0.1    GitHub Project    Created by Sergey Kupletsky

Getting Started

BASIC: Default CSS

Use this method to get the default Material Design Iconic Font CSS.

  1. Download latest version of Material Design Iconic Font from this site or GitHub.
  2. Unpack the entire material-design-iconic-font archive into your project.
  3. In the <head> of your html, reference the location to your material-design-iconic-font.min.css. 
    <link rel="stylesheet" href="path/to/material-design-iconic-font/css/material-design-iconic-font.min.css">
  4. Check out the examples to start using Material Design Iconic Font!

PRO: Custom LESS

Use this method to customize Material Design Iconic Font using LESS.

  1. Download source code of Material Design Iconic Font from GitHub.
  2. Copy the less/ and fonts/ directories into your project in material-design-iconic-font folder.
  3. Open your project's path/to/material-design-iconic-font/less/variables.less and edit the @md-font-path variable to point to your font directory. 
    @md-font-path:   "../font";

    The font path is relative from your compiled CSS directory.

  4. Re-compile your LESS.
  5. Check out the examples to start using Material Design Iconic Font!