Icon

Ignite UI for Angular Icon コンポーネントはアイコンおよびフォント セットを統合するため、交互の使用やマテリアル アイコンをマークアップに追加できます。コンポーネントはカスタム色をサポートします。アイコンを非アクティブに設定できます。

Icon デモ

依存関係

Icon コンポーネントが NgModule としてエクスポートされるため、アプリケーションで AppModule への IgxIconModule のインポートのみが必要になります。

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';

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

使用方法

<igx-icon color="magenta">home</igx-icon>

コード例

igx-icon を使用して active ホーム アイコンをマゼンタ color に設定します。

<igx-icon color="magenta" isActive="true">home</igx-icon>

inactive アイコンを設定します。

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

CSS でアイコン サイズを設定するには、カスタム CSS を作成して名前を custom-size とします。アイコン サイズは font-size プロパティで変更でき、更に中央揃えにするには、widthheight を同じ値にします。

<igx-icon color="#0375be" class="custom-size">phone_iphone</igx-icon>
<!-- icon-sample2.component.scss -->

.custom-size{
    font-size: 56px;
    width: 56px;
    height: 56px;
}

SVG Icons

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

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

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

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon("contains", "/assets/images/svg/contains.svg", "filter-icons");
}
<!-- svg-icon-sample.html -->

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

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

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;
    

6.2.0 の重大な変更

  • IgxIconComponent iconName プロパティは非推奨です。「マテリアル」アイコンのアイコン名を設定するには、開始タグと終了タグの間にアイコンの名前を配置します。'Font Awesome' と SVG のアイコンには name プロパティを使用します。

API リファレンス

その他のリソース

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