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>