Icon (アイコン)

Ignite UI for Angular Icon は、カスタム SVG アイコンのコレクションなどの登録済みアイコン セットから、名前付きアイコンを表示するコンポーネントです。

既定では、Angular Icon は Material Icons のリガチャを表示します。SVG アイコンやその他のアイコン フォントを IgxIconService で登録すると、同じ方法で使用できます。

ライブ デモ

構造

アイコンは、コマンド、デバイス、ディレクトリ、または一般的なアクションを表すシンボルです。

igx-icon 要素は、アイコン ファミリのタイプに応じて、次のいずれかを描画します:

igx-icon.igx-icon[aria-hidden="true"]   // host - also carries the family class, e.g. .material-icons
├─ ligature text                        // `liga` family - the icon name, e.g. home
├─ div > svg                            // SVG icon registered with IgxIconService
└─ ng-content                           // projected ligature text when `name` isn't set

font ファミリの場合、ホスト上のクラスがグリフを描画し、要素にはコンテンツがありません。

はじめに

Angular Icon を使用するには、基本的なプロジェクト設定について Ignite UI for Angular 作業の開始トピックに従い、対象プラットフォームのコンポーネントを追加します。

プロジェクトで Ignite UI for Angular をまだ使用していない場合は、ng add igniteui-angular を実行します。次に、スタンドアロンの Icon をインポートし、コンポーネントの imports に追加します:

import { Component } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';

@Component({
    selector: 'app-home',
    template: '<igx-icon name="home"></igx-icon>',
    imports: [IgxIconComponent]
})
export class HomeComponent {}

home という名前は Material Icons のリガチャであるため、Material Icons フォントが読み込まれるとすぐにアイコンが表示されます。

使用方法

Angular Icon を使用して、ラベル、ボタン、リスト項目、ナビゲーションにわかりやすいシンボルを追加したり、ステータスをひと目で示したりします。

名前とファミリ

Angular Icon は、その name を family 内で検索します。既定の material ファミリは Material Icons のリガチャを表示するため、名前は home や favorite などのリガチャです:

<igx-icon name="home"></igx-icon>
<igx-icon name="favorite"></igx-icon>

リガチャをコンテンツとして投影することもできます:

<igx-icon>bluetooth</igx-icon>

SVG アイコン

SVG アイコンを IgxIconService で登録し、アイコンに名前とファミリを設定します。addSvgIcon メソッドは URL から SVG ファイルを取得し、addSvgIconFromText は SVG マークアップを登録します:

import { Component, OnInit, inject } from '@angular/core';
import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';

const searchIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

@Component({
    selector: 'app-filter-icons',
    template: `
        <igx-icon name="contains" family="filter-icons"></igx-icon>
        <igx-icon name="search" family="filter-icons"></igx-icon>
    `,
    imports: [IgxIconComponent]
})
export class FilterIconsComponent implements OnInit {
    private iconService = inject(IgxIconService);

    public ngOnInit() {
        this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons');
        this.iconService.addSvgIconFromText('search', searchIcon, 'filter-icons');
    }
}

SVG アイコンとリガチャが同じ名前とファミリを共有している場合、アイコンは SVG を表示します。

フォント ファミリ

setFamily を使用して、Material Symbols などの別のアイコン フォントをファミリとして追加します。最初にフォントのスタイルシートを読み込みます:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />

ファミリ名をフォントの CSS クラスにマップし、そのタイプを liga に設定します:

this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });

次に、アイコンにファミリを設定します。Material Symbols はバリアブル フォントであるため、塗りつぶしや太さなどの設定を調整できます:

<igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>

.custom-icon {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}

font タイプのファミリ、名前のプレフィックス、アイコン参照については、Icon Service トピックを参照してください。

サイズ

Angular Icon は、テーマの小、中、大のサイズ プリセットをサポートし、既定では大のプリセットを使用します。--ig-size CSS 変数を --ig-size-small、--ig-size-medium、または --ig-size-large に設定して、プリセットを選択します:

.small {
  --ig-size: var(--ig-size-small);
}

.medium {
  --ig-size: var(--ig-size-medium);
}

<igx-icon class="small" name="build"></igx-icon>

プリセット以外のサイズには、アイコンに --size を設定します。コンテナー内のすべてのアイコンのサイズを変更するには、コンテナーに --ig-icon-size を設定します:

.custom-size {
  --size: 56px;
}

.toolbar {
  --ig-icon-size: 2rem;
}

アクティブ (Active)

active を false に設定すると、アイコンが非アクティブとして表示されます。非アクティブなアイコンは、テーマの無効状態の色を使用し、不透明度を下げて表示されます:

<igx-icon name="volume_off" [active]="false"></igx-icon>

アクセシブルな名前

装飾的なアイコンは支援技術から隠し、それ自体で意味を伝えるアイコンには、その意味を説明するアクセシブルな名前を付けます。

Angular Icon は、ariaHidden 入力が aria-hidden="true" を設定するため、既定では支援技術から隠されます。意味を伝えるアイコンを公開するには、ariaHidden を false に設定し、img ロールと aria-label を追加します:

<igx-icon name="warning" [ariaHidden]="false" role="img" aria-label="Warning"></igx-icon>

使用すべき場合と使用すべきでない場合

背景との十分なコントラストを確保するようにアイコンの色を慎重に選択し、同じ色の類似した濃淡や、色収差を生じさせる組み合わせは避けてください。

プロパティ

Angular Icon は次のプロパティを公開します。完全な型定義については、API リファレンスを参照してください。

メソッド

Angular Icon は、次の API で登録したアイコンを描画します。

アプリケーション ルートで提供される IgxIconService の次のメソッドで、アイコンとファミリを登録します。

スタイル設定

Angular Icon は、既定では周囲のテキストの色を使用します。次の CSS 変数で、色とサイズを変更します:

Sass テーマ

icon-theme 関数でテーマを作成し、tokens() ミックスインで含めます。この関数は $color、$size、および $disabled-color パラメーターを受け入れ、ミックスインは、含めたスコープ内で対応する --ig-icon-* 変数を出力します。

@use "igniteui-angular/theming" as *;

$custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949
);

:host {
  @include tokens($custom-icon-theme);
}

CSS 変数

Sass ビルドの手順なしでローカルにスタイルを設定する必要がある場合は、アイコンまたはコンテナーに色とサイズを設定します:

<igx-icon name="home" [style.color]="'#e41c77'"></igx-icon>

.toolbar {
  --ig-icon-color: var(--ig-primary-500);
}

Tailwind によるスタイル設定

igniteui-theming のカスタム Tailwind ユーティリティ クラスで Angular Icon のスタイルを設定できます。最初にTailwind をセットアップしてから、グローバル スタイルシートで Ignite UI ユーティリティをインポートします:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

対応するテーマには light-icon または dark-icon クラスを使用し、生成された CSS 変数を任意のプロパティでオーバーライドします:

<igx-icon name="person" class="!light-icon ![--color:#7B9E89] ![--size:48px]"></igx-icon>

感嘆符 (!) は、Tailwind ユーティリティが Icon の既定のテーマ スタイルより優先されるようにします。

アクセシビリティ

Angular Icon は、近くのコンテンツを装飾するか、それ自体で意味を伝える、対話型ではない視覚要素です。

キーボード操作

Angular Icon はフォーカスを受け取らず、キーボード操作はありません。tabindex を設定せず、キーボード イベントやポインター イベントを処理しません。ユーザーがキーボードでアイコンを操作する必要がある場合は、Icon Button を使用します。

スクリーン リーダー / ARIA

Angular Icon は、それ自体では何もアナウンスしません。支援技術が報告する内容は、アイコンのアクセシブルな名前によって決まります:

• アイコンは、ariaHidden 入力を通じて既定で aria-hidden="true" を設定するため、支援技術はアイコンを無視します。aria-label だけでは、隠されたアイコンは公開されません。
• アイコンはロールを設定しません。ロールとラベルなしで ariaHidden を false に設定すると、スクリーン リーダーはリガチャ アイコンを home などのテキストとして読み上げます。
• 意味を伝えるアイコンを公開するには、ariaHidden を false に設定し、img ロールと aria-label を追加します。
• active 入力はスタイルのみを変更します。非アクティブな状態は支援技術に公開されません。

アクセシビリティ準拠

Infragistics は、Ignite UI for Angular のアクセシビリティ サポートを、Section 508 および WCAG 2.1 ガイドライン領域について、アクセシビリティ準拠トピックで文書化しています。

ユーザー側の責任:

• それ自体で意味を伝えるすべてのアイコンにアクセシブルな名前を付け、装飾的なアイコンは隠したままにします。アクセシブルな名前を参照してください。
• 情報を伝えるアイコンと背景の間で、特にテーマの色をオーバーライドする場合は、1.4.11 非テキストのコントラストが要求する 3:1 以上のコントラスト比を維持します。
• ユーザーが操作するアクションには、Icon ではなく Icon Button を使用します。
• 1.4.1 色の使用が要求するように、非アクティブなスタイルだけに依存して状態を伝えないでください。状態をテキストまたはアクセシブルな名前で記述します。

トラブルシューティング

Angular Icon が表示されない場合や、期待どおりに表示されない場合は、次の回答を参照してください。

アイコンが空なのはなぜですか?

次の原因を確認します:

• リガチャ アイコンには、既定の material ファミリの Material Icons など、そのファミリのフォントが必要です。フォントのスタイルシートが読み込まれていることを確認します。
• SVG アイコンには、登録と同じ名前とファミリが必要です。
• addSvgIcon がファイルを取得するには HttpClient が必要です。失敗したリクエストがないかネットワーク パネルを確認します。
• サービスは SVG アイコンをブラウザーでのみキャッシュするため、サーバー側レンダリング中は SVG アイコンが表示されません。

SVG アイコンにテーマの色が適用されないのはなぜですか?

Angular Icon はルートの <svg> 要素に色を適用し、子要素はそれを塗りつぶしとして継承します。色がハードコードされている子要素は、その色を保持します:

<svg viewBox="0 0 24 24">
  <path fill="#050d42" d="..." />
</svg>

子要素からハードコードされた色を削除するか、テーマがオーバーライドするルートの <svg> 要素に色を設定します。アイコンの一部を意図的に着色するには、fill="var(--ig-primary-500)" などのテーマ カラー変数を使用します。

アイコンにカーソルを合わせるとツールチップが表示されるのはなぜですか?

ブラウザーは、SVG の <title> 要素をネイティブのツールチップとして表示します。

addSvgIcon または addSvgIconFromText の stripMeta 引数に true を渡すと、キャッシュされた SVG から <title> 要素と <desc> 要素が削除されます:

this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons', true);

既知の制限事項

Angular Icon には次の制限事項があります:

• Icon は対話型ではない視覚要素です。フォーカスを受け取らず、キーボード入力も処理しません。
• テーマの色は、ルートの <svg> 要素と、その塗りつぶしを継承する子要素に適用されます。色がハードコードされている子要素は、その色を保持します。
• Angular Icon には、右から左へのレイアウトでアイコンを反転するオプションがありません。

API リファレンス

Angular Icon の API リファレンスには、対象プラットフォームの完全な API が記載されています。

• Icon
• IgxIconService
• icon-theme

依存関係

Angular Icon が、テーマベースのサイズと色を適用するには、テーマ スタイルシートが必要です。フレームワーク固有のセットアップについては、作業の開始を参照してください。

既定の material ファミリのリガチャ アイコンには Material Icons フォントも必要で、addSvgIcon には Angular の HttpClient が必要です。

その他のリソース

次のリソースでは、Angular Icon に関するその他のガイダンスとプロジェクト サポートを提供しています:

• Icon - Design System Component
• Ignite UI for Angular フォーラム
• Ignite UI for Angular GitHub

アイコン ファミリ、アイコン参照、および拡張 Material アイコン セットについては、Icon Service および Material Icons Extended トピックを参照してください。

関連コンポーネント

Angular Icon は、他のコンポーネント内に表示されることがよくあります。アイコンがシンボルの表示以上のことを行う必要がある場合は、次のコンポーネントを使用します:

• Icon Button - ユーザーがアイコンをクリックまたは押してアクションを実行する場合は、Icon Button を使用します。
• Avatar - アイコン、イニシャル、または画像で、人物やエンティティを表すには、Avatar を使用します。
• Badge - 別の要素の横に短いステータスや数を表示するには、Badge を使用します。

FAQ

これらの質問では、Angular Icon の一般的なセットアップ、アクセシビリティ、および使用シナリオについて説明します。