Basic Icons View SASS View LESS
zmdi-flower-alt
You can place Material Design Iconic Font icons just about anywhere using the CSS Prefix zmdi
and the icon's
name.
- code
- source
- <i class="zmdi zmdi-flower-alt"></i> zmdi-flower-alt
<i class="zmdi zmdi-flower-alt"></i> zmdi-flower-alt
Larger Icons View SASS View LESS
zmdi-hc-lg
zmdi-hc-2x
zmdi-hc-3x
zmdi-hc-4x
zmdi-hc-5x
To increase icon sizes relative to their container, use the zmdi-hc-lg
, zmdi-hc-2x
,
zmdi-hc-3x
, zmdi-hc-4x
, or zmdi-hc-5x
classes.
- code
- source
- <p><i class="zmdi zmdi-flower-alt zmdi-hc-lg"></i> zmdi-hc-lg</p>
- <p><i class="zmdi zmdi-flower-alt zmdi-hc-2x"></i> zmdi-hc-2x</p>
- <p><i class="zmdi zmdi-flower-alt zmdi-hc-3x"></i> zmdi-hc-3x</p>
- <p><i class="zmdi zmdi-flower-alt zmdi-hc-4x"></i> zmdi-hc-4x</p>
- <p><i class="zmdi zmdi-flower-alt zmdi-hc-5x"></i> zmdi-hc-5x</p>
<p><i class="zmdi zmdi-flower-alt zmdi-hc-lg"></i> zmdi-hc-lg</p>
<p><i class="zmdi zmdi-flower-alt zmdi-hc-2x"></i> zmdi-hc-2x</p>
<p><i class="zmdi zmdi-flower-alt zmdi-hc-3x"></i> zmdi-hc-3x</p>
<p><i class="zmdi zmdi-flower-alt zmdi-hc-4x"></i> zmdi-hc-4x</p>
<p><i class="zmdi zmdi-flower-alt zmdi-hc-5x"></i> zmdi-hc-5x</p>
Fixed Width Icons View SASS View LESS
Use zmdi-hc-fw
to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
- code
- source
- <div class="list-group">
- <a class="list-group-item" href="#"><i class="zmdi zmdi-home zmdi-hc-fw"></i> Home</a>
- <a class="list-group-item" href="#"><i class="zmdi zmdi-inbox zmdi-hc-fw"></i> Inbox</a>
- <a class="list-group-item" href="#"><i class="zmdi zmdi-star zmdi-hc-fw"></i> Starred</a>
- <a class="list-group-item" href="#"><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> Drafts</a>
- </div>
<div class="list-group">
<a class="list-group-item" href="#"><i class="zmdi zmdi-home zmdi-hc-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-inbox zmdi-hc-fw"></i> Inbox</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-star zmdi-hc-fw"></i> Starred</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> Drafts</a>
</div>
List Icons View SASS View LESS
- List icons
- can be used
- as bullets
- in lists
Use zmdi-hc-ul
and zmdi-hc-li
to replace default bullets in unordered lists.
- code
- source
- <ul class="zmdi-hc-ul">
- <li><i class="zmdi-hc-li zmdi zmdi-check-square"></i>List icons</li>
- <li><i class="zmdi-hc-li zmdi zmdi-dot-circle-alt"></i>can be used</li>
- <li><i class="zmdi-hc-li zmdi zmdi-refresh zmdi-hc-spin"></i>as bullets</li>
- <li><i class="zmdi-hc-li zmdi zmdi-square-o"></i>in lists</li>
- </ul>
<ul class="zmdi-hc-ul">
<li><i class="zmdi-hc-li zmdi zmdi-check-square"></i>List icons</li>
<li><i class="zmdi-hc-li zmdi zmdi-dot-circle-alt"></i>can be used</li>
<li><i class="zmdi-hc-li zmdi zmdi-refresh zmdi-hc-spin"></i>as bullets</li>
<li><i class="zmdi-hc-li zmdi zmdi-square-o"></i>in lists</li>
</ul>
Bordered & Pulled Icons View SASS View SASS View LESS View LESS
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 zmdi-hc-border
or zmdi-hc-border-circle
and pull-right
or pull-left
for easy pull quotes or
article icons.
- code
- source
- <i class="zmdi zmdi-laptop zmdi-hc-3x zmdi-hc-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.
<i class="zmdi zmdi-laptop zmdi-hc-3x zmdi-hc-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 SASS View LESS
Spinning
Reverse spinning
Use the zmdi-hc-spin
or zmdi-hc-spin-reverse
class to get any icon to rotate. Works well with zmdi-settings
or zmdi-replay
.
Spinning
- code
- source
- <button class="btn btn-default btn-lg"><i class="zmdi zmdi-rotate-right zmdi-hc-spin"></i></button>
- <button class="btn btn-default btn-lg"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="zmdi zmdi-rotate-right zmdi-hc-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></button>
Reverse spinning
- code
- source
- <button class="btn btn-default btn-lg"><i class="zmdi zmdi-rotate-left zmdi-hc-spin-reverse"></i></button>
- <button class="btn btn-default btn-lg"><i class="zmdi zmdi-replay zmdi-hc-spin-reverse"></i></button>
<button class="btn btn-default btn-lg"><i class="zmdi zmdi-rotate-left zmdi-hc-spin-reverse"></i></button>
<button class="btn btn-default btn-lg"><i class="zmdi zmdi-replay zmdi-hc-spin-reverse"></i></button>
For IE users: CSS3 animations are supported in IE10+.
Rotated & Flipped View SASS View LESS
To arbitrarily rotate and flip icons, use the zmdi-hc-rotate-*
and zmdi-hc-flip-*
classes.
- code
- source
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw"></i> normal</button>
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-90"></i> zmdi-hc-rotate-90</button>
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-180"></i> zmdi-hc-rotate-18</button>
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-270"></i> zmdi-hc-rotate-270</button>
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-flip-horizontal"></i> zmdi-hc-flip-horizontal</button>
- <button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-flip-vertical"></i> zmdi-hc-flip-vertical</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw"></i> normal</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-90"></i> zmdi-hc-rotate-90</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-180"></i> zmdi-hc-rotate-18</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-rotate-270"></i> zmdi-hc-rotate-270</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-flip-horizontal"></i> zmdi-hc-flip-horizontal</button>
<button class="btn btn-default btn-block"><i class="zmdi zmdi-invert-colors zmdi-hc-fw zmdi-hc-flip-vertical"></i> zmdi-hc-flip-vertical</button>
Stacked Icons View SASS View LESS
inversed zmdi-polymer on zmdi-circle
red zmdi-block on zmdi-phone
To stack multiple icons, use the zmdi-hc-stack
class on the parent, the zmdi-hc-stack-1x
for the regularly sized icon, and zmdi-hc-stack-2x
for the larger icon. zmdi-hc-inverse
or other color classes can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.
- code
- source
- <span class="zmdi-hc-stack zmdi-hc-lg">
- <i class="zmdi zmdi-square-o zmdi-hc-stack-2x"></i>
- <i class="zmdi zmdi-share zmdi-hc-stack-1x"></i>
- </span>
- zmdi-share on zmdi-square-o<br>
- <span class="zmdi-hc-stack zmdi-hc-lg">
- <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
- <i class="zmdi zmdi-polymer zmdi-hc-stack-1x zmdi-hc-inverse"></i>
- </span>
- inversed zmdi-polymer on zmdi-circle<br>
- <span class="zmdi-hc-stack zmdi-hc-lg">
- <i class="zmdi zmdi-phone zmdi-hc-stack-1x"></i>
- <i class="zmdi zmdi-block zmdi-hc-stack-2x mdc-text-red"></i>
- </span>
- red zmdi-block on zmdi-phone
<span class="zmdi-hc-stack zmdi-hc-lg">
<i class="zmdi zmdi-square-o zmdi-hc-stack-2x"></i>
<i class="zmdi zmdi-share zmdi-hc-stack-1x"></i>
</span>
zmdi-share on zmdi-square-o<br>
<span class="zmdi-hc-stack zmdi-hc-lg">
<i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
<i class="zmdi zmdi-polymer zmdi-hc-stack-1x zmdi-hc-inverse"></i>
</span>
inversed zmdi-polymer on zmdi-circle<br>
<span class="zmdi-hc-stack zmdi-hc-lg">
<i class="zmdi zmdi-phone zmdi-hc-stack-1x"></i>
<i class="zmdi zmdi-block zmdi-hc-stack-2x mdc-text-red"></i>
</span>
red zmdi-block on zmdi-phone
In last example for red color I using Material Design Color Palette library
Colored Icons
Amber
Red
Green
Light Bblue
Grey
Red 700
You can change icon color by changing color
css property.
Or you can use Material Design Color Palette css toolkit for all material design colors.
- code
- source
- <div style="font-size: 20px">
- <p><i class="zmdi zmdi-flower-alt mdc-text-amber"></i> Amber</p>
- <p><i class="zmdi zmdi-flower-alt mdc-text-red"></i> Red</p>
- <p><i class="zmdi zmdi-flower-alt mdc-text-green"></i> Green</p>
- <p><i class="zmdi zmdi-flower-alt mdc-text-light-blue"></i> Light Bblue</p>
- <p><i class="zmdi zmdi-flower-alt mdc-text-grey"></i> Grey</p>
- <p><i class="zmdi zmdi-flower-alt mdc-text-red-700"></i> Red 700</p>
- </div>
<div style="font-size: 20px">
<p><i class="zmdi zmdi-flower-alt mdc-text-amber"></i> Amber</p>
<p><i class="zmdi zmdi-flower-alt mdc-text-red"></i> Red</p>
<p><i class="zmdi zmdi-flower-alt mdc-text-green"></i> Green</p>
<p><i class="zmdi zmdi-flower-alt mdc-text-light-blue"></i> Light Bblue</p>
<p><i class="zmdi zmdi-flower-alt mdc-text-grey"></i> Grey</p>
<p><i class="zmdi zmdi-flower-alt mdc-text-red-700"></i> Red 700</p>
</div>
Animated Icons
wobble
fadeInLeft
pulse
You can place animating icons by using CSS3 Animation.
Or you can use one of the css-animation library, for example: Animate.css.
- code
- source
- <div style="font-size: 20px">
- <p><i class="zmdi zmdi-pin animated infinite wobble zmdi-hc-fw"></i> wobble</p>
- <p><i class="zmdi zmdi-directions-bike animated infinite fadeInLeft zmdi-hc-fw"></i> fadeInLeft</p>
- <p><i class="zmdi zmdi-notifications-active animated infinite pulse zmdi-hc-fw mdc-text-blue"></i> pulse</p>
- </div>
<div style="font-size: 20px">
<p><i class="zmdi zmdi-pin animated infinite wobble zmdi-hc-fw"></i> wobble</p>
<p><i class="zmdi zmdi-directions-bike animated infinite fadeInLeft zmdi-hc-fw"></i> fadeInLeft</p>
<p><i class="zmdi zmdi-notifications-active animated infinite pulse zmdi-hc-fw mdc-text-blue"></i> pulse</p>
</div>
In last example for blue color I using Material Design Color Palette library