Displays an icon. The following icon suites are available:
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>
There are three kinds of icons available in Onsen UI:
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.
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>
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>
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>
Name | Type | Description |
---|---|---|
icon | String |
The icon name. |
size | String |
The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in the size in pixels.
Icons can also be styled based on modifier presence. Add comma-separated icons with
will render as a |
rotate | Number | Number of degrees to rotate the icon. Valid values are 90, 180 and 270. Optional. |
fixed-width |
Boolean
false |
When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. Optional. |
spin | Specify whether the icon should be spinning. Optional. |
Name | Description |
---|---|
fixedWidth | When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. |
spin | Specify whether the icon should be spinning. |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.