Icon

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

Angular Icon の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 StackBlitz で表示

使用方法

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

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';

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

例

アイコンの色

デフォルトの色を変更するには、igx-icon コンポーネントの color プロパティを使用します。

<igx-icon color="#e41c77">home</igx-icon>

アイコンの無効化

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

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

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

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

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

アイコンのサイズ

CSS を使用してアイコンをカスタマイズできます。アイコン サイズは font-size プロパティで変更できます。さらに中央揃えにするには、width と height プロパティに等しい値を設定します。

.custom-size{
    font-size: 56px;
    width: 56px;
    height: 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" fontSet="filter-icons"></igx-icon>

codesandbox で表示 StackBlitz で表示

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

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 ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';

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

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

CSS 変数の使用

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

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

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

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

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

:host {
     ::ng-deep {
        @include igx-icon($custom-icon-theme);
    }
}

デモ

codesandbox で表示 StackBlitz で表示

6.2.0 の重大な変更

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

API リファレンス

• IgxIconComponent
• IgxIconComponent スタイル

その他のリソース

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

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