Angular Icon (アイコン) の概要

Angular Icon コンポーネントを使用すると、フォントを簡単に表示したり、事前定義された SVG アイコンの大規模なセットから選択したりできます。プロジェクトのカスタム フォント アイコンを作成することもできます。多数の属性を利用して、使用中のアイコンのサイズを定義または変更したり、さまざまなスタイルをアイコンに適用したりできます。

Angular Icon の例

使用方法

Icon を使用する前に、次のように登録する必要があります:

Icon には、それ自体にアイコンは含まれていません。これは、登録された SVG 画像を表示するためのコンジットです。

アイコンの追加

上記の方法では、search という名前のアイコンが material という名前のコレクションに追加されます。

次に、新しく登録されたアイコンを使用するには、名前とコレクションを Icon 要素に渡すだけです。

アイコンを登録する 2 番目の方法は、SVG 文字列を RegisterIconFromText メソッドに渡すことです。

次に、上記のコンポーネント サンプルで説明したのと同じ方法で使用します。

サイズ

アイコン コンポーネントは、small、medium (デフォルト)、large の 3 つのアイコン サイズをサポートしています。アイコンのサイズを変更するには、次のように --ig-size CSS 変数を利用できます。

アイコン コンポーネントにはカスタム サイズを設定することもできます。最も推奨される方法は、--size CSS 変数を使用することです。

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

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

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

Mirrored (ミラー化済み)

一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコンを水平方向に反転させる mirrored 属性を提供します。

スタイル設定

アイコン コンポーネントは、Icon 要素に直接スタイルを適用することでスタイルを設定できます。

igc-icon {
  --size: 28px;
  color: var(--ig-primary-500);
}

API リファレンス

その他のリソース

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)