Basic Icons

zmdi-flower-alt

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

 zmdi-flower-alt

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. 

 zmdi-hc-lg

                                
 zmdi-hc-2x

                                
 zmdi-hc-3x

                                
 zmdi-hc-4x

                                
 zmdi-hc-5x
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Fixed Width Icons

Home Inbox Starred Drafts

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

  • List icons
  • can be used
  • as bullets
  • in lists

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

    
                                
  • List icons
    • 
                                
  • can be used
    • 
                                
  • as bullets
    • 
                                
  • in 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. 


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

zmdi-share on zmdi-square-o
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. 


                            
                            
                        
                        zmdi-share on zmdi-square-o

                        
                            
                            
                        
                        inversed zmdi-polymer on zmdi-circle

                        
                            
                            
                        
                        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.

Link to project on Github


                                
 Amber

                                
 Red

                                
 Green

                                
 Light Bblue

                                
 Grey

                                
 Red 700

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.

Link to project on Github


                                
 wobble

                                
 fadeInLeft

                                
 pulse

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