Angular 아이콘 구성 요소 개요

Ignite UI for Angular 아이콘/글꼴 패밀리를 통합하여 개발자가 이를 상호 교환하여 사용하고 마크업에 머티리얼 아이콘을 추가할 수 있도록 합니다.

Angular Icon Example

Getting Started with Ignite UI for Angular Icon

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

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxIconModule in your app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxIconComponent as a standalone dependency.

// 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';
}

Now that you have the Ignite UI for Angular Icon module or component imported, you can start using the igx-icon component.

Using the Angular Icon

Icon Color

Use style.color CSS property to change its default color:

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

Inactive Icon

If you want to disable an icon, you can use the active property:

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

Content Projection

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

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

Icon Size

You can customize the icons using CSS. To change an icon size use the --size CSS variable:

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

SVG Icons

You can also use an SVG image as an icon. First, inject the IgxIconService dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code.

Use the addSvgIcon method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the addSvgIconFromText method to import an SVG file, providing the SVG text content instead of the file URL.

동일한 이름과 동일한 계열을 가진 두 개의 아이콘이 있는 경우 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

Additionally, users can take advantage of the latest Material icons and their design variations included in the newly created Material Symbols Library. To start using Material Symbols, first you have to add the library to your application:

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

Then we need to inject the IgxIconService dependency and make use of its setFamily method so that Material Symbols can work with 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;
}

To learn more about Material Symbols styles please visit their official documentation.

Server-side Rendering Note

Note

In case you have implemented server side rendering logic in your application using Angular Universal and have used the IgxIconService to register icons, this may cause the following exception:

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

In order to avoid this, execute the listed steps:

`xmlhttprequest`를 설치합니다:
```
npm i xmlhttprequest
```

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

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

스타일링

To get started with styling the icons, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the icon-theme and accepts the parameters, required to customize the icon as desired.

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

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

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

Demo

SVG Limitations

It’s important to note that when using custom SVG icons, the icon-theme can apply and overwrite colors only on the <svg> element itself. If the SVG contains child elements such as <path>, <rect>, <circle>, <g>, etc., with hardcoded color values, those colors cannot be overridden by the theme.

예를 들어:

<svg>
    <path fill="#050d42"/>
</svg>

In this case, the icon will always use the #050d42 color defined in the <path>, regardless of the color provided by the theme.

<svg fill="#050d42">
    <path .../>
</svg>

Here, the fill color is applied to the <svg> element, so it can be overridden with custom color provided via icon-theme.

We recommend not using hardcoded colors on SVG child elements so the icon can be styled entirely using the icon-theme. However, if you still want to apply hardcoded colors to child elements, you can also use the Ignite UI color variables.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <!-- This element uses the theme color from the igx-icon component -->
  <path d="M12 2L15 8H9L12 2Z" />

  <!-- This element uses an accent color from Ignite UI palette -->
  <circle cx="12" cy="17" r="4" fill="var(--ig-primary-500)" />
</svg>

Custom sizing

You can either use the --size variable, targeting the igx-icon directly:

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

Or you can use the universal --igx-icon-size variable to target all instances:

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

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

You can also use one of the predefined sizes, assigning it to the --ig-size variable. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large:

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

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

Styling with Tailwind

You can style the icon using our custom Tailwind utility classes. Make sure to set up Tailwind first.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

The utility file includes both light and dark theme variants.

Use light-* classes for the light theme.
Use dark-* classes for the dark theme.
Append the component name after the prefix, e.g., light-icon, dark-icon.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

전체 속성 목록은 아이콘 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>

Note

The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

마지막에 아이콘은 다음과 같이 보여야 합니다:

API References

Additional Resources

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