Icons

Icons can be displayed using the <ons-icon> element. To specify the icon you also need to defined the icon attribute.

The following code will display a Material Design face icon.

<ons-icon
  icon="md-face">
</ons-icon>

Available icons

There are three kinds of icons available in Onsen UI:

• Font Awesome
• Material Icons
• Ionicons

The icon attribute is prefixed with fa- for Font Awesome, md- for Material Icons and ion- for Ionicons.

Ionicons are good for iOS apps while the Material Icons work best for apps using Material Design.

Since Onsen UI renders differently based on the platform there is a special syntax to also select the icons based on platform:

<ons-icon
  icon="ion-ios-menu, material:md-menu">
</ons-icon>

This code will automatically render as a md-menu icon on Android devices and as ion-ios-menu on iOS devices.

Changing size and color

To change the size of the icon you can use the size attribute.

<ons-icon
  icon="md-face"
  size="20px">
</ons-icon>

Since the icon is a font, changing the color is as easy as changing the font size:

<ons-icon
  icon="md-face"
  style="color: red">
</ons-icon>

Rotating and spinning

To make the icon spin, the spin attribute is added.

<ons-icon
  icon="md-face"
  spin>
</ons-icon>

The icon can be rotated using the rotate attribute. The supported rotations are 90, 180 and 270 degrees.

<ons-icon
  icon="md-face"
  rotate="90">
</ons-icon>

Using with other components

Icons are often used inside other components. To add an icon to a button all you need to do is put it inside the <ons-button> element.

<ons-button>
  <ons-icon icon="md-face"></ons-icon>
  Button
</ons-button>

Of course you can also put it in toolbar buttons and floating action buttons:

<ons-toolbar-button>
  <ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>

<ons-fab>
  <ons-icon icon="md-plus"></ons-icon>
</ons-fab>