머티리얼 아이콘 확장
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
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
에서 페이지 보기
GitHub