ion-icon

Iconは、Ioniconsライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。

利用可能なアイコンのリストは ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page をご覧ください。

基本的な使い方

アクセシビリティ

純粋に装飾的なコンテンツであるアイコンは、aria-hidden="true"を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。

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

アイコンがインタラクティブな場合は、aria-labelを追加することで代替テキストを定義する必要があります。

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

また、アイコンが説明する他の要素の中にある場合は、その要素に aria-label を付加し、 aria-hidden でアイコンを非表示とします。

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