| title |
|---|
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 a list of all available icons, see ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page.
import Basic from '@site/static/usage/v8/icon/basic/index.md';
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>