Angular Icon (アイコン) コンポーネントの概要

Ignite UI for Angular Icon コンポーネントはアイコンおよびフォント ファミリを統合するため、交互の使用やマテリアル アイコンをマークアップに追加できます。

Angular Icon の例

Ignite UI for Angular Icon を使用した作業の開始

Ignite UI for Angular Icon コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxIconModule をインポートします。

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

あるいは、16.0.0 以降、IgxIconComponent をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

import { IgxIconComponent } from 'igniteui-angular';
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<igx-icon [style.color]="color">home</igx-icon>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxIconComponent],
})
export class HomeComponent {
  public color = '#e41c77';
}

Ignite UI for Angular Icon モジュールまたはコンポーネントをインポートしたので、igx-icon コンポーネントの使用を開始できます。

Angular Icon の使用

アイコンの色

style.color CSS プロパティを使用して、デフォルトの色を変更します。

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

アイコンの無効化

アイコンを無効にするには、active を使用できます。

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

コンテンツ プロジェクション

コンテンツ プロジェクションでアイコンを設定できます。

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

アイコンのサイズ

CSS を使用してアイコンをカスタマイズできます。アイコンのサイズを変更するには、--size CSS 変数を使用します。

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

SVG アイコン

SVG 画像はアイコンとして使用できます。はじめに IgxIconService 依存を注入します。この例ではコンポーネントのコンストラクタに注入されますが、コード内の必要な場所に使用できます。

addSvgIcon メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。ファミリも指定できます。HTML マークアップの SVG ファイルを使用できます。または addSvgIconFromText メソッドを使用して SVG ファイルをインポートして、SVC テキスト コンテンツを使用できます。

• 同じ名前のアイコンが 2 つある場合に同じファミリ SVG アイコンが優先順位に従って表示されます。
• SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
• 追加のポリフィル スクリプトがインターネット エクスプローラーで必要な場合があります。

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}

<igx-icon name="contains" family="filter-icons"></igx-icon>

マテリアル シンボル

さらに、ユーザーは新しく作成されたマテリアル シンボル ライブラリに含まれる最新のマテリアル アイコンとそのデザイン バリエーションを利用できます。マテリアル シンボルの使用を開始するには、まずライブラリをアプリケーションに追加する必要があります。

<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"/>

次に、IgxIconService 依存関係を注入し、その setFamily メソッドを利用して、マテリアル シンボルが igx-icon で動作できるようにする必要があります。

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family
    this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}

これで、目的のアイコンをマークアップに追加し、調整可能なフォント スタイルを使用してカスタマイズする準備が整いました。

<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;
}

マテリアル シンボル スタイルの詳細については、公式ドキュメントをご覧ください。

サーバーサイド レンダリング時の注意

Note

Angular Universal を使用してアプリケーションにサーバー側のレンダリング ロジックを実装し、IgxIconService を使用してアイコンを登録した場合は、以下の例外が発生することがあります。

XMLHttpRequest is not defined. Could not fetch SVG from url. (XMLHttpRequest が定義されていません。url から SVG をフェッチできませんでした。)>

これを避けるためには、以下の順序に従って下さい。

1. `xmlhttprequest` のインストール:

   npm i xmlhttprequest
   

2. `server.ts` ファイル以外に追加するファイル:

   (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
   

スタイル設定

アイコンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、icon-theme を拡張し、必要に応じてアイコンをカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成する方法です。

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

最後には、カスタム アイコン テーマをアプリケーションに渡します。

@include css-vars($custom-icon-theme);

デモ

カスタム サイズ変更

igx-icon を直接ターゲットとして --size 変数を使用することができます。

igx-icon {
  --size: 50px;
}

または、ユニバーサル変数 --igx-icon-size を使用して、すべてのインスタンスをターゲットにすることもできます。

<div class="my-app">
  <igx-icon></igx-icon>
</div>

.my-app {
  --igx-icon-size: 50px;
}

事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

igx-icon {
  --ig-size: var(--ig-size-medium);
}

詳細については、サイズの記事をご覧ください。

API リファレンス

• IgxIconComponent
• IgxIconComponent スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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