Angular 아이콘 서비스 개요

Ignite UI for Angular 사용하면 개발자가 다양한 소스에서 새로운 아이콘을 UI에 추가할 수 있습니다.

Introduction

Ignite UI for Angular 사용자가 아이콘 패밀리를 만들고 관리할 수 있는 여러 가지 방법을 제공합니다.

아이콘 서비스는 Ignite UI for Angular에서 직접 가져올 수 있습니다.

import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxIconService } from 'igniteui-angular/core';


@Component({
    selector: 'app-root',
    standalone: true,
    imports: [ IgxIconComponent ]
})
export class AppComponent implements OnInit {
    constructor(public iconService: IgxIconService) {}
}

Adding Icon Families

By default the Icon Service sets its default family to material.

Adding new families of icons is done using the setFamily method of the icon service. It creates an family entry with some metadata that instructs the igx-icon component about the icon(s) it should render.

Let's use a practical example to explain how the setFamily method works:

/** 
* The icon service associates a given family name (provided by the user) 
* with a specific CSS class (as documented in the providing icon font) 
* and corresponding icon name (documented in the icon font).
* NOTE: Material is already the default family.
*/ 
iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa' });

The example above creates two icon families: 'material' and 'fa-solid'. Their types are different, the material family is registered as liga, while the fa-solid family is registered as font. The difference between the two is how the igx-icon component would go about rendering them. Typically, Font Awesome uses class names to specify code points to a font family, hence why we set its type to font. Anytime we have to rely on code points to render icons, we should set the type to font. The Material Icons family is still a font family, however, the standard way to display an icon is to provide a ligature name, instead of a class name pointing to a specific code point. For that reason, we need to set the type to liga. There's a third family type - svg, it is reserved for icon families that will be comprised of SVGs that are registered through the Icon Service.

Having registered the two font families above, we can now consume their icons in a standardized way via the igx-icon component:

<igx-icon family="material" name="home"></igx-icon>
<igx-icon family="fa-solid" name="car"></igx-icon>

You might have noticed that for the material family we use the ligature name as name, while in the case of the fa-solid family we specify the className for name, which is fa-car but drop the fa- prefix as it has been specified when we registered the icon family in the previous step.

Adding SVG Icons

The Ignite UI for Angular Icon Service allows us to associate SVG images with families and give them names so that they can be included via the igx-icon component in the same way as font-based icons. The SVGs should be resolved via either strings or via absolute URI to the SVG asset.

// Add a new 'material' icon called 'my-icon' from an SVG file
iconService.addSvgIcon('my-icon', 'my-icon.svg', 'material');

// Add a new 'fa-solid' icon called 'my-icon' from string 
iconService.addSvgIconFromText('my-icon', '<svg>...</svg>', 'fa-solid');

마크 업의 뒷부분 :

<igx-icon family="material" name="my-icon"></igx-icon>
<igx-icon family="fa-solid" name="my-icon"></igx-icon>

Note that we are adding custom SVG icons to families of type liga and font. This is possible because the addSvgIcon and addSvgIconFromText methods register the icons as svg type implicitly, allowing the igx-icon component to correctly render the SVG.

Meta Families

Ignite UI for Angular 하면 글꼴 아이콘 패밀리를 설정하거나 공통된 범위 아래에 SVG를 추가하여 추가된 아이콘을 결합하는 가상 패밀리 맵을 만들 수 있으므로 참조하기가 더 쉽습니다.

// The `setIconRef` sets an icon reference in the icon map,
// assuming material and fa-solid have been added as families,
iconService.setIconRef('home', 'my-family', { family: 'material', name: 'home' });
iconService.setIconRef('home-alt', 'my-family', { family: 'fa-solid', name: 'home' });
iconService.setIconRef('car', 'my-family', { family: 'fa-solid', name: 'car' });

마크 업의 뒷부분 :

<igx-icon family="my-family" name="home"></igx-icon>
<igx-icon family="my-family" name="home-alt"></igx-icon>
<igx-icon family="my-family" name="car"></igx-icon>

Icon Retrieval

It is possible to get an icon for a given family and icon name in order to read the original icon type, name, family, and className.

const { family, className, name, type } = iconService.getIcon('my-family', 'car');

console.log(family); // -> 'fa-solid'
console.log(className); // -> 'fas'
console.log(name); // -> 'fa-car'
console.log(type); // -> 'font'

Internal Usage

Starting with version 18.1.0 of Ignite UI for Angular, we added a new setFamily method that allows us to create new families of icons in the Icon Service and associate them with CSS classes, types, and even prefixes. Additionally, icons used internally are now all declared by reference in a new default family with aliased names (see table bellow).

별명	대상 아이콘	Target Family
add	add	material
add_child	자식 추가	imx-icons
add_row	행 추가	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	arrow_forward	material
arrow_next	chevron_right	material
arrow_prev	chevron_left	material
case_sensitive	case-sensitive	imx-icons
carousel_next	arrow_forward	material
carousel_prev	arrow_back	material
chevron_left	chevron_left	material
chevron_right	chevron_right	material
시계	access_time	material
닫다	닫다	material
무너지다	확장_없음	material
확인하다	확인하다	material
date_range	date_range	material
삭제하다	delete	material
drag_indicator	drag_indicator	material
편집하다	편집하다	material
오류	오류	material
넓히다	확장_자세히	material
expand_more	확장_자세히	material
file_download	file_download	material
filter_all	모두 선택	imx-icons
filter_before	이전-이전	imx-icons
filter_contains	포함	imx-icons
filter_does_not_contain	포함하지 않음	imx-icons
filter_empty	비어 있음	imx-icons
filter_equal	같음	imx-icons
filter_false	거짓입니다.	imx-icons
filter_greater_than	보다 큼	imx-icons
filter_greater_than_or_equal	크거나 같음	imx-icons
filter_in	IS-IN (인-인)	imx-icons
filter_last_month	지난달	imx-icons
filter_last_year	지난해	imx-icons
filter_less_than	보다 작음	imx-icons
filter_less_than_or_equal	보다 작거나 같음	imx-icons
filter_next_month	다음 달	imx-icons
filter_next_year	내년	imx-icons
filter_not_empty	비어 있지 않음	imx-icons
filter_not_equal	같지 않음(not-equal)	imx-icons
filter_not_null	null이 아님	imx-icons
filter_null	is-null (영문)	imx-icons
filter_starts_with	다음으로 시작	imx-icons
filter_this_month	이달의 경우	imx-icons
filter_this_year	올해	imx-icons
filter_today	오늘	imx-icons
filter_true	is-true (참)	imx-icons
filter_yesterday	어제	imx-icons
first_page	첫 페이지	material
group_work	그룹 과제	material
숨기다	가시성_꺼짐	material
import_export	수입 수출	material
input_collapse	arrow_drop_up	material
input_clear	분명한	material
input_expand	arrow_drop_down	material
jump_down	점프 다운	imx-icons
jump_up	점프 업	imx-icons
last_page	마지막 페이지	material
more_vert	more_vert	material
다음	navigate_next	material
핀	핀 왼쪽	imx-icons
이전	navigate_before	material
리프레쉬	새로 고치다	material
제거하다	취소	material
검색	찾다	material
선택한	완료	material
보이다	시계	material
sort_asc	arrow_upward	material
sort_desc	arrow_downward	material
함수	함수	material
table_rows	table_rows	material
오늘	calendar_today	material
tree_collapse	확장_자세히	material
tree_expand	chevron_right	material
unfold_less	펼치지 않음	material
unfold_more	unfold_more	material
고정 해제	왼쪽 고정 해제	imx-icons
view_column	view_column	material

사용자 지정 템플릿을 만드는 것과 달리 참조로 내부 아이콘을 변경하는 이점을 활용하려면 다음을 수행하여 콤보에서 확장/축소 아이콘을 교체하고 구성 요소를 선택할 수 있습니다.

iconService.setIconRef('input_expand', 'default', {
    name: 'arrow_downward',
    family: 'material',
});

iconService.setIconRef('input_collapse', 'default', {
    name: 'arrow_upward',
    family: 'material',
});

This will set the expand and collapse icons to the arrow_downward and arrow_upward ligatures, respectively, from the material font family for all combo and select components.

다음은 각 구성 요소에서 사용하는 모든 아이콘에 대한 분석입니다.

액션 스트립

상	설명
add_child	팝업 메뉴에서 사용됩니다.
add_row	팝업 메뉴에서 사용됩니다.
more_vert	팝업 메뉴에서 사용됩니다.

달력

상	설명
arrow_prev	월/년 사이를 탐색하기 위해 헤더에서 사용됩니다.
arrow_next	월/년 사이를 탐색하기 위해 헤더에서 사용됩니다.

회전목마

상	설명
carousel_prev	슬라이드 사이를 탐색하는 데 사용됩니다.
carousel_next	슬라이드 사이를 탐색하는 데 사용됩니다.

칩

상	설명
선택한	칩이 선택되었음을 나타내는 데 사용됩니다.
제거하다	제거 버튼에 사용됩니다.

콤보 (심플 콤보 포함)

상	설명
case_sensitive	대/소문자 구분 필터링을 표시하고 전환하는 데 사용됩니다.
input_clear	지우기 버튼에 사용됩니다.
input_expand	콤보 메뉴가 축소되어 있을 때 토글 버튼에 사용됩니다.
input_collapse	콤보 메뉴가 확장될 때 토글 버튼에 사용됩니다.

날짜 선택기

상	설명
오늘	선택기를 트리거하는 토글 버튼에 사용됩니다.
input_clear	지우기 버튼에 사용됩니다.

날짜 범위 선택기

상	설명
date_range	선택기를 트리거하는 토글 버튼에 사용됩니다.

확장 패널

상	설명
넓히다	확장된 상태를 트리거하는 토글 버튼에 사용됩니다.
무너지다	축소된 상태를 트리거하는 토글 단추에 사용됩니다.

그리드

상	설명
add	필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다.
arrow_back	열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
arrow_drop_down	Used in various buttons to indicate toggleable menus.
arrow_forward	열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
취소	작업을 취소하기 위해 다양한 UI 요소에 사용됩니다.
chevron_right	Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다.
닫다	확장된 메뉴를 닫는 데 사용됩니다.
확인하다	작업을 확인하는 데 사용됩니다.
drag_indicator	항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다.
오류	잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다.
expand_more	Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다.
file_download	Excel 필터 내보내기에서 사용됩니다.
filter_*	다양한 필터링 피연산자에 사용됩니다.
group_work	그룹화 기준 끌어 놓기 영역에서 사용됩니다.
숨기다	열을 숨기기 위해 다양한 UI 요소에서 사용됩니다.
import_export	이동을 위해 피벗 데이터 선택기에서 사용됩니다.
input_clear	입력 데이터를 지우기 위해 입력 필드에서 사용됩니다.
다음	필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
핀	열 고정을 위해 다양한 UI 요소에서 사용됩니다.
이전	필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
제거하다	다양한 UI 요소에서 제거 표시기로 사용됩니다.
리프레쉬	필터링 행 메뉴에서 필터를 다시 로드하는 데 사용됩니다.
선택한	활성 선택을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
보이다	열을 표시하기 위해 다양한 UI 요소에서 사용됩니다.
sort_asc	정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
sort_desc	정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
함수	피벗 그리드 및 데이터 선택기에서 사용됩니다.
table_rows	피벗 그리드 데이터 선택기에서 사용됩니다.
tree_collapse	나무와 같은 구조에서 세부 정보를 덜 표시하는 데 사용됩니다.
tree_expand	나무와 같은 구조에서 더 많은 세부 정보를 표시하는 데 사용됩니다.
고정 해제	열 고정을 위해 다양한 UI 요소에서 사용됩니다.
unfold_less	계층적 그리드에서 모든 행을 축소하는 데 사용됩니다.
unfold_more	계층적 그리드에서 모든 행을 확장하는 데 사용됩니다.
view_column	피벗 데이터 선택기에서 사용됩니다.

입력 그룹

상	설명
input_clear	지우기 버튼에 사용됩니다.

페이지네이터

상	설명
first_page	첫 번째 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
last_page	마지막 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
이전	이전 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
다음	다음 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.

쿼리 빌더

상	설명
add	새 필터 항목을 추가하기 위해 단추에서 사용됩니다.
닫다	상황에 맞는 메뉴를 닫는 단추에서 사용됩니다.
편집하다	필터 항목을 편집하기 위해 단추에서 사용됩니다.
확인하다	단추에서 새 필터 항목 추가를 확인하는 데 사용됩니다.
그룹 해제	단추에서 필터 항목을 그룹 해제하는 데 사용됩니다.
삭제하다	단추에서 필터 항목을 삭제하는 데 사용됩니다.
filter_*	다양한 필터링 피연산자에 사용됩니다.

선택하다

상	설명
input_expand	선택 메뉴가 축소되어 있을 때 토글 버튼에 사용됩니다.
input_collapse	선택 메뉴가 확장될 때 토글 버튼에 사용됩니다.

탭

상	설명
이전	이전 탭으로 이동하는 데 사용되는 단추에서 사용됩니다.
다음	다음 탭으로 이동하는 데 사용되는 단추에서 사용됩니다.

시간 선택기

상	설명
시계	선택기를 트리거하는 토글 버튼에 사용됩니다.

나무

상	설명
tree_expand	선택기를 트리거하는 토글 버튼에 사용됩니다.
tree_collapse	선택기를 트리거하는 토글 버튼에 사용됩니다.

API

다음은 Ignite UI for Angular 사용할 수 있는 모든 방법을 간략하게 요약한 것입니다.

Add Family

setFamily(name: string, meta: IconFamilyMeta): IgxIconService;

Icon References

아이콘 맵이 아직 없는 경우에만 설정합니다.

addIconRef(name: string, family: string, icon: IconMeta): void;

아이콘 맵에서 Icon 참조를 설정합니다(이미 있는 경우 재정의됨).

setIconRef(name: string, family: string, icon: IconMeta): void;

Get 및 Icon 참조

getIconRef(family: string, name: string): IconReference;

SVG Icons

URI에서:

addSvgIcon(name: string, url: string, family: string, stripMeta = false): void;

문자열에서:

addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void;

API References

• IgxIconService

Additional Resources

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

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