Different Icons sizes

  • mdicon-xs
  • mdicon-sm
  • mdicon-md
  • mdicon-lg

                	<i class="mdicon android mdicon-xs"><i> mdicon-xs

                        <i class="mdicon android mdicon-sm"><i> mdicon-sm

                        <i class="mdicon android mdicon-md"><i> mdicon-md

                        <i class="mdicon android mdicon-lg"><i> mdicon-lg


If your icons are getting cut off on top and bottom, make sure you have sufficient line-height.

Rotated Icons

  • Normal
  • mdicon-rotate-90
  • mdicon-rotate-180
  • mdicon-rotate-270


               		<i class="mdicon favorite"></i> Normal

                        <i class="mdicon favorite mdicon-rotate-90"></i> mdicon-rotate-90

                        <i class="mdicon favorite mdicon-rotate-180"></i> mdicon-rotate-180

                        <i class="mdicon favorite mdicon-rotate-270"></i> mdicon-rotate-270



use the .mdicon-rotate-*

Fixed Width Icons

  • Profile
  • Photo
  • Message
  • Account
  • Logout


               		<i class="mdicon account-circle mdicon-fw"></i> Profile

                        <i class="mdicon photo-camera mdicon-fw"></i> Photo

                        <i class="mdicon mail mdicon-fw"></i> Message

                        <i class="mdicon settings-cogwheel mdicon-fw"></i> Account

                        <i class="mdicon exit-to-app mdicon-fw"></i> Logout



Use .mdicon-fw to set icons at a fixed width. look in examples

Spinning Icons


               		<i class="mdicon settings-cogwheel mdicon-spin"></i> Normal

                        <i class="mdicon reload mdicon-spin"></i> mdicon-rotate-90

                        <i class="mdicon explore mdicon-spin"></i> mdicon-rotate-180

                        <i class="mdicon refresh mdicon-spin"></i> mdicon-rotate-270



use the .mdicon-spin class for rotate the icons.

Better work with Bootstrap 3.x