ion-icon

Icon は、アイコンを表示するための汎用コンテナです。Ionicons はすべての Ionic Framework アプリケーションにデフォルトで含まれていますが、このコンポーネントでは Ionicons、カスタム SVG、フォントベースのアイコンライブラリ、そのほかのアイコンシステムも表示できます。アイコンの提供元にかかわらず、一貫したスタイルとサイズを提供します。

Ionicons のドキュメントについては、ionic.io/ioniconsを参照してください。

基本的な使い方

フォントアイコン

Font Awesome、Bootstrap Icons、Remix Icons、Phosphor Icons などのフォントベースのアイコンは、Icon の slot に配置して表示できます。

カスタム SVG

Icon でカスタム SVG を表示する方法は 2 つあります。src プロパティを使用して外部 SVG ファイルを読み込むか、SVG コンテンツをコンポーネントの slot に直接配置します。

アクセシビリティ

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

<!-- 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>

アイコンがインタラクティブな場合は、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>

また、アイコンが説明する他の要素の中にある場合は、その要素に aria-label を付加し、 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>