ion-icon

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

利用可能なすべてのアイコンのリストについては、ionic.io/ioniconsを参照してください。スタイリングやカスタムSVGの使用法など、詳細については、使用方法のページを参照してください。

基本的な使い方

アクセシビリティ

純粋に装飾的なコンテンツであるアイコンには、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>