ion-icon

Icon is a universal container for displaying icons. While Ionicons is included by default with all Ionic Framework applications, the component can display Ionicons, custom SVGs, font-based icon libraries, and other icon systems. It provides consistent styling and sizing regardless of where an icon comes from.

For Ionicons documentation, refer to ionic.io/ionicons.

Basic Usage

Font Icons

Font-based icons from libraries such as Font Awesome, Bootstrap Icons, Remix Icons, and Phosphor Icons can be displayed by slotting them into Icon.

Custom SVGs

Custom SVGs can be displayed with Icon in two ways: by loading an external SVG file using the src property or by slotting SVG content directly into the component.

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.

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

<!-- Font-based icon -->
<ion-icon aria-hidden="true">
  <i class="fas fa-heart"></i>
</ion-icon>

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

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

<!-- Font-based icon -->
<ion-icon aria-label="Favorite">
  <i class="fas fa-heart"></i>
</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.

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

<!-- Font-based icon -->
<ion-button aria-label="Favorite">
  <ion-icon aria-hidden="true">
    <i class="fas fa-heart"></i>
  </ion-icon>
</ion-button>