拡張されたマテリアル アイコン

インストール

npm install @igniteui/material-icons-extended

使用方法

まず、コンポーネントに単一のアイコンを登録する方法を見てみましょう。

import { Component, OnInit } from '@angular/core';
import { IgxIconService } from 'igniteui-angular/icon';
// import { IgxIconService } from '@infragistics/igniteui-angular'; for licensed package
import { github } from '@igniteui/material-icons-extended';
// ...
export class SampleComponent implements OnInit {
  constructor(private iconService: IgxIconService) {}

  ngOnInit(): void {
    // Register a single icon
    this.iconService.addSvgIconFromText(github.name, github.value, 'imx-icons');
  }
}

次に、複数のアイコン/カテゴリを登録する方法を見てみましょう。

//...
import { health, programming } from "@igniteui/material-icons-extended";

export class SampleComponent implements OnInit {
  public allIcons = [
    ...health,
    ...programming,
  ];
  //...
  addIcons() {
    for (let icon of this.allIcons) {
      this.iconService.addSvgIconFromText(icon.name, icon.value, "imx-icons");
    }
  }

  ngOnInit(): void {
    this.addIcons();
  }
}

コンポーネント テンプレートでアイコンを使用するには:

<igx-icon family="imx-icons" name="github"></igx-icon>

詳細とその他の使用方法については、GitHub リポジトリにアクセスしてください。

その他のリソース

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

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