머티리얼 아이콘 확장

    Ignite UI Material Icons Extended는 Google에서 설정한 재질 아이콘을 확장하는 아이콘의 하위 집합입니다.

    이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱 구축을 시작해 보세요. 무료로 다운로드하세요.

    Installation

    npm install @igniteui/material-icons-extended

    Usage

    먼저 구성 요소에 단일 아이콘을 등록하는 방법을 살펴보겠습니다.

    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 저장소로 이동하세요.

    Additional Resources

    IgxIconService

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.