A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.
You can see the full list of icons on the Material Icons website. Replace the spaces in the icon name by underscores (for example, arrow back becomes arrow_back).
Alternatively you can use your PNG or SVG icons using the md-src property.
The use of font icons without ligatures are suported too, although this approach lacks accessibility support.
The following classes can be applied to change the color palette:
md-primarymd-accentmd-warn
home
menu
people
access_time
<md-icon>home</md-icon>
<md-icon class="md-primary">menu</md-icon>
<md-icon class="md-accent">people</md-icon>
<md-icon class="md-warn">access_time</md-icon>
home
home
home
home
<md-icon>home</md-icon>
<md-icon class="md-size-2x md-primary">home</md-icon>
<md-icon class="md-size-3x md-accent">home</md-icon>
<md-icon class="md-size-4x md-warn">home</md-icon>
SVG:
PNG:
menu
menu
menu
menu
<md-layout :md-gutter="true">
<md-layout>
<strong class="md-body-2">SVG:</strong>
<md-icon md-src="assets/icon-home.svg"></md-icon>
<md-icon class="md-size-2x md-primary" md-src="assets/icon-home.svg"></md-icon>
<md-icon class="md-size-3x md-accent" md-src="assets/icon-home.svg"></md-icon>
<md-icon class="md-size-4x md-warn" md-src="assets/icon-home.svg"></md-icon>
</md-layout>
<md-layout>
<strong class="md-body-2">PNG:</strong>
<md-icon md-src="assets/icon-menu.png">menu</md-icon>
<md-icon class="md-size-2x" md-src="assets/icon-menu.png">menu</md-icon>
<md-icon class="md-size-3x" md-src="assets/icon-menu.png">menu</md-icon>
<md-icon class="md-size-4x" md-src="assets/icon-menu.png">menu</md-icon>
</md-layout>
</md-layout>
<md-icon md-iconset="fa fa-home"></md-icon>
<md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"></md-icon>
<md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"></md-icon>
<md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"></md-icon>
<hr/>
<md-icon md-iconset="ion-home"></md-icon>
<md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"></md-icon>
<md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"></md-icon>
<md-icon md-iconset="ion-clock" class="md-size-4x md-warn"></md-icon>
home
menu
people
access_time
<md-icon md-theme="light-blue" class="md-primary">home</md-icon>
<md-icon md-theme="green" class="md-primary">menu</md-icon>
<md-icon md-theme="brown" class="md-primary">people</md-icon>
<md-icon md-theme="orange" class="md-primary">access_time</md-icon>