Icon

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

    Angular Icon の例

    使用方法

    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>
    
    Note

    color プロパティは、Ignite UI for Angular の次のメジャー バージョンで非推奨になります。アイコンの色を変更するには、CSS プロパティを使用します。

    アイコンの無効化

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

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

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

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

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

    アイコンのサイズ

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

    .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" family="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;
      

    スタイル設定

    アイコンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する 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);
        }
    }
    

    デモ

    API リファレンス

    その他のリソース

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