Note: We do not include the ability to use mdi-flip-. and mdi-rotate-. at the same time. Mobirise contains a special extension to work with icon fonts and this font is available by default. If you want to add some icons to your page made with other tools, install a icon font to your page first. 1) Download the icon font files, and put the mobirise folder to the same folder with your page. If you do not see an icon simply install the latest font file. Note: This font does not conflict with the webfont 'Material Design Icons'. Download the cheatsheet.html above which allows one click copy of the font character, SVG path, codepoint or icon name which can be pasted. Font vs Webfont.

1. Mdi Icons Cheatsheet Home Assistant
2. Material Design Icons

Basic Icons

Displaying 6029 icons:. Goal of Iconify is to offer unified icon framework for multiple platforms. Currently Iconify is available only as JavaScript library for browsers, React and Angular components. If you use HTML or CSS syntax, Iconify loads icons from Iconify API.

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

Larger Icons

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.

Fixed Width Icons

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.

List Icons

Use zmdi-hc-ul and zmdi-hc-li to replace default bullets in unordered lists.

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 zmdi-hc-border or zmdi-hc-border-circle and pull-right or pull-left for easy pull quotes or article icons.

Spinning Icons

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

Reverse spinning

For IE users: CSS3 animations are supported in IE10+.

Rotated & Flipped

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

Stacked Icons

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.

Mdi Icons Cheatsheet Home Assistant

In last example for red color I using Material Design Color Palette library

Colored Icons

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.

Animated Icons

You can place animating icons by using CSS3 Animation.

Or you can use one of the css-animation library, for example: Animate.css.

Material Design Icons

In last example for blue color I using Material Design Color Palette library