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 をフェッチできませんでした。)

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

`xmlhttprequest` のインストール:
```
npm i xmlhttprequest
```

`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
);

CSS 変数の使用

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

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

テーマオーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタムテーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
     ::ng-deep {
        @include icon($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 リファレンス

その他のリソース

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