ion-icon

Icon is a simple component made available through the Ionicons library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.

For more information, including styling, custom SVG usage, and all available icons, see ionic.io/ionicons.

Basic Usage

Accessibility

Icons that are purely decorative content should have aria-hidden="true". This will not visually hide the icon, but it will hide the element from assistive technology.

<ion-icon name="heart" aria-hidden="true"></ion-icon>

If the icon is interactive, it should have alternate text defined by adding an aria-label.

<ion-icon name="heart" aria-label="Favorite"></ion-icon>

Alternatively, if the icon is inside of another element that it is describing, that element should have the aria-label added to it, and the icon should be hidden using aria-hidden.

<ion-button aria-label="Favorite">
  <ion-icon name="heart" aria-hidden="true"></ion-icon>
</ion-button>