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

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

    Angular Icon の例

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

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

    ng add igniteui-angular
cmd

    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 {}
typescript

    あるいは、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';
}
typescript

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

    Angular Icon の使用

    アイコンの色

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

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

    アイコンの無効化

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

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

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

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

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

    アイコンのサイズ

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

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

    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');
}
typescript
    <igx-icon name="contains" family="filter-icons"></igx-icon>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    マテリアル シンボル

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

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

    次に、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' });
}
ts

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

    <igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>
html
    .custom-icon {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}
scss

    EXAMPLE

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

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

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

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

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

    1. `xmlhttprequest` のインストール: 
      npm i xmlhttprequest
cmd
    2. `server.ts` ファイル以外に追加するファイル: 
      (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
typescript

    スタイル設定

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

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

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

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

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

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

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

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    カスタム サイズ変更

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

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

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

    <div class="my-app">
  <igx-icon></igx-icon>
</div>
html
    .my-app {
  --igx-icon-size: 50px;
}
scss

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

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

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

    API リファレンス

    その他のリソース

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