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:

    SVG の制限

    カスタム SVG アイコンを使用する場合、icon-theme は <svg> 要素自体の色のみを適用および上書きできることに注意することが重要です。SVG 内に <path>、<rect>、<circle>、<g> などの子要素が含まれており、それらにハードコードされたカラー値が設定されている場合、その色はテーマから上書きできません。

    例:

    <svg>
    <path fill="#050d42"/>
</svg>
html

    このような場合、アイコンは常に <path> 要素内で定義された #050d42 の色を使用し、テーマで指定された色は反映されません。

    <svg fill="#050d42">
    <path .../>
</svg>
html

    ここでは、塗りつぶしの色が <svg> 要素に適用されているため、icon-theme で提供されるカスタム カラーで上書きできます。

    アイコン全体を icon-theme を使用してスタイル設定できるように、SVG 子要素にハードコードされた色を使用しないことをお勧めします。ただし、子要素にハードコードされた色を適用する場合は、Ignite UI のカラー変数を使用することもできます。

    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <!-- This element uses the theme color from the igx-icon component -->
  <path d="M12 2L15 8H9L12 2Z" />

  <!-- This element uses an accent color from Ignite UI palette -->
  <circle cx="12" cy="17" r="4" fill="var(--ig-primary-500)" />
</svg>
html

    カスタム サイズ変更

    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 リファレンス

    その他のリソース

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