Free “Material Design Iconic Font” – full suite of material design icons

Material Design Iconic Font is a full suite of material design icons (created and maintained by Google) for easy scalable vector graphics on websites.Very similar to popular FontAwesome icons set. As a mater of fact you can also use Fontawsome in many cases. However “Material Design Iconic Font” is made specifically and in accordance to Google’s material design guidelines.

For more information or to download full set of free Iconic Font icons ( examples and icon downloads) please visit original website:

http://zavoloklom.github.io/material-design-iconic-font/

Default CSS “Iconic Font” Icons Usage

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!

Advanced Usage: Custom LESS or SCSS

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

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.Open your project’s path/to/material-design-iconic-font/less/variables.less or path/to/material-design-iconic-font/scss/_variables.scss 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 or SCSS if using a static compiler.
5. Check out the examples to start using Material Design Iconic Font!

Leave a Reply