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

    Ignite UI for Angular は、マテリアル アイコン セットを拡張する素晴らしいアイコン セットを提供します。

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

    インストール

    npm install @igniteui/material-icons-extended

    使用方法

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

    import { Component, OnInit } from '@angular/core';
import { IgxIconService } from 'igniteui-angular';
// 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 リポジトリにアクセスしてください。

    その他のリソース

    IgxIconService

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