# Examples

Usage examples of Material Design Iconic Font.

- Tweet

## Basic Icons
View LESS

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
View LESS

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
View LESS (bordered) View LESS (pulled)

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
View LESS

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
View LESS

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