Examples

Usage examples of Material Design Iconic Font.

Basic Icons

md-local-florist

You can place Material Design Iconic Font icons just about anywhere using the CSS Prefix md and the icon's name. 

<i class="md md-local-florist"></i> md-local-florist
  • If you need to use the icons separately from the text or if text and icon has different size, it is better not to use a class md

Larger Icons

md-lg

md-2x

md-3x

md-4x

md-5x

To increase icon sizes relative to their container, use the md-lg, md-2x, md-3x, md-4x, or md-5x classes. 

<i class="md-local-florist md-lg"></i> md-lg
<i class="md-local-florist md-2x"></i> md-2x
<i class="md-local-florist md-3x"></i> md-3x
<i class="md-local-florist md-4x"></i> md-4x
<i class="md-local-florist md-5x"></i> md-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Bordered & Pulled Icons

In 1842, Babbage was invited to give a seminar at the University of Turin about his Analytical Engine. Luigi Menabrea, a young Italian engineer, and future Prime Minister of Italy, wrote up Babbage's lecture in French, and this transcript was subsequently published in the Bibliothèque universelle de Genève in October 1842.

Use md-border or md-border-circle and pull-right or pull-left for easy pull quotes or article icons. 

<i class="md-computer md-3x md-border pull-left"></i>
In 1842, Babbage was invited to give a seminar at the University of Turin about his Analytical Engine.
Luigi Menabrea, a young Italian engineer, and future Prime Minister of Italy, wrote up Babbage's lecture in French, and this transcript was subsequently published in the Bibliothèque universelle de Genève in October 1842.

Spinning Icons

Spinning

Reverse spinning

Use the md-spin class to get any icon to rotate. Works well with md-settings , md-replay, and md-loop. 

<i class="md md-rotate-right md-spin"></i>
<i class="md md-settings md-spin"></i>
<i class="md md-rotate-left md-spin-reverse"></i>
<i class="md md-replay md-spin-reverse"></i>
<i class="md md-loop md-spin-reverse"></i>

CSS3 animations aren't supported in IE8 - IE9.

Rotated & Flipped

  normal
  md-rotate-90
  md-rotate-180
  md-rotate-270
  md-flip-horizontal
  md-flip-vertical

To arbitrarily rotate and flip icons, use the md-rotate-* and md-flip-* classes. 

<i class="md md-invert-colors"></i> normal<br>
<i class="md md-invert-colors md-rotate-90"></i> md-rotate-90<br>
<i class="md md-invert-colors md-rotate-180"></i> md-rotate-180<br>
<i class="md md-invert-colors md-rotate-270"></i> md-rotate-270<br>
<i class="md md-invert-colors md-flip-horizontal"></i> md-flip-horizontal<br>
<i class="md md-invert-colors md-flip-vertical"></i> icon-flip-vertical