Angular 아이콘 구성 요소 개요

Ignite UI for Angular 아이콘/글꼴 계열을 통합하므로 개발자는 이를 상호 교환적으로 사용하고 마크업에 머티리얼 아이콘을 추가할 수 있습니다.

Angular Icon Example

Getting Started with Ignite UI for Angular Icon

Ignite UI for Angular 아이콘 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxIconModule 당신의 app.module.ts 파일.

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

또는 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';
}

이제 Ignite UI for Angular 가져왔으므로 igx-icon 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Icon

Icon Color

​style.color CSS 속성을 사용하여 기본 색상을 변경하세요.

<igx-icon [style.color]="'#e41c77'">home</igx-icon>

Inactive Icon

아이콘을 비활성화하려면 active 속성을 사용하면 됩니다.

<igx-icon [active]="false">volume_off</igx-icon>

Content Projection

콘텐츠 투영을 통해 아이콘을 설정할 수 있습니다.

<igx-icon>bluetooth</igx-icon>

Icon Size

CSS를 사용하여 아이콘을 사용자 정의할 수 있습니다. 아이콘 크기를 변경하려면--size CSS 변수를 사용하세요.

.custom-size {
    --size: 56px;
}

SVG Icons

SVG 이미지를 아이콘으로 사용할 수도 있습니다. 먼저 IgxIconService 종속성을 삽입합니다. 이 예에서는 이를 구성 요소의 생성자에 삽입하지만 코드에서 필요할 때마다 사용할 수 있습니다.

​addSvgIcon 메서드를 사용하여 캐시에 있는 SVG 파일을 가져옵니다. SVG가 캐시되면 애플리케이션의 어느 곳에서나 사용할 수 있습니다. 아이콘 이름과 파일 URL 경로는 메소드의 필수 매개변수입니다. 가족도 지정할 수 있습니다. 그런 다음 HTML 마크업에서 SVG 파일을 사용할 수 있습니다. 또는 addSvgIconFromText 메서드를 사용하여 SVG 파일을 가져와서 파일 URL 대신 SVG 텍스트 콘텐츠를 제공할 수 있습니다.

• 동일한 이름과 동일한 계열을 가진 두 개의 아이콘이 있는 경우 SVG 아이콘이 우선적으로 표시됩니다.
• SVG 파일에는 이미지 너비와 높이를 제공하지 않는 것이 좋습니다.
• Internet Explorer의 경우 추가 폴리필 스크립트("폴리필")가 필요할 수 있습니다.

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}

<igx-icon name="contains" family="filter-icons"></igx-icon>

Material Symbols

또한 사용자는 새로 생성된 Material Symbols Library에 포함된 최신 Material 아이콘과 디자인 변형을 활용할 수 있습니다. 머티리얼 심볼을 사용하려면 먼저 애플리케이션에 라이브러리를 추가해야 합니다.

<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" />

그런 다음 종속성을 IgxIconService 주입하고 해당 메서드를 사용하여 setFamily Material Symbols가 다음과 같이 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' });
}

이제 원하는 아이콘을 마크업에 추가하고 조정 가능한 글꼴 스타일을 사용하여 사용자 정의할 준비가 되었습니다.

<igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>

.custom-icon {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 40
}

머티리얼 심볼 스타일에 대해 자세히 알아보려면 해당 official documentation 방문하세요.

Server-side Rendering Note

Note

Angular Universal을 사용하여 애플리케이션에 서버 측 렌더링 논리를 구현하고 IgxIconService 사용하여 아이콘을 등록한 경우 다음 예외가 발생할 수 있습니다.

XMLHttpRequest is not defined. Could not fetch SVG from url.

이를 방지하려면 나열된 단계를 실행하십시오.

1. `xmlhttprequest`를 설치합니다:

   npm i xmlhttprequest
   

2. `server.ts` 파일 상단에 다음을 추가하세요.

   (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
   

스타일링

아이콘 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근 방식에 따라 icon-theme 확장하고 원하는 대로 아이콘을 사용자 지정하는 데 필요한 매개 변수를 허용하는 새 테마를 만듭니다.

$custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949
);

Using CSS variables

마지막 단계는 애플리케이션에 사용자 정의 아이콘 테마를 전달하는 것입니다.

 @include css-vars($custom-icon-theme);

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
     ::ng-deep {
        @include icon($custom-icon-theme);
    }
}

Demo

Custom sizing

변수를 사용하여--size 다음을 직접 타겟팅 할 수 있습니다. igx-icon​

igx-icon {
  --size: 50px;
}

또는 universal--igx-icon-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.

<div class="my-app">
  <igx-icon></igx-icon>
</div>

.my-app {
  --igx-icon-size: 50px;
}

미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large​--ig-size-medium​

igx-icon {
    --ig-size: var(--ig-size-medium);
}

​크기 문서에서 자세히 알아보세요.

API References

• IgxIconComponent
• IgxIconComponent 스타일

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub