<Icon />

Displays an icon. The following icon suites are available: Font Awesome Ionicons Material Design Iconic Font

Tutorial

Icons

Icons are displayed using the Icon component. In Onsen UI there are three families of icons available:

The icon is selected using the icon prop. To use Material Icons the md- prefix is used, ion- for Ionicons and fa- for Font Awesome.

<Icon icon='md-menu' />

The code above displays a Material Design menu icon.

Props

Name Type Description
modifier string The appearance of the icon. Optional.
icon 'object or string' can be either a string or an object. If it is an string, it is set to an specific icon like ‘ions-navicon’. If it is an object, it represents a dictionary of the icons depending on the modifier e.g. {{default: 'ion-navicon', material: 'md-menu'}} Optional.
size 'object or number' can be either a number or an object. If it is an number, it specifies the icon size with a number in pixels. If it is an object, it represents a dictionary of the icon sizes depending on the modifier e.g. {{default: 20, material: 18}} Optional.
rotate number Number of degrees to rotate the icon. Valid values are 90, 180 and 270. Optional.
fixedWidth bool 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 bool Specify whether the icon should be spinning. Optional.

Need Help?

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.