Angular의 모든 매트 아이콘 목록

1. Angular의 머티리얼 디자인 아이콘 DX
2. Google에서 제공하는 Angular Material 아이콘

Angular의 모든 매트 아이콘을 찾을 수 있는 웹사이트와 Angular 프로젝트에서 이러한 매트 아이콘을 사용하는 방법을 소개합니다.

Angular의 머티리얼 디자인 아이콘 DX

머티리얼 디자인 아이콘 DX는 900개 이상의 머티리얼 아이콘을 찾을 수 있는 Google의 머티리얼 디자인 아이콘 포크입니다. 이 프로젝트는 개발 경험 문제를 해결하기 위해 만들어졌습니다.

프로젝트에 머티리얼 디자인 아이콘을 설치하는 방법에는 두 가지가 있습니다.

npm을 사용하여 설치하려면:

npm install material-design-icons-iconfont --save

미리 컴파일된 CSS 파일을 include 또는 @import하려면:

<link href=".../material-design-icons.css" rel="stylesheet">

용법

scss를 사용하여 프로젝트에서 글꼴과 변수를 가져올 수 있습니다.

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

클래스 사용자 정의

Sass mixins를 사용하여 클래스를 사용자 정의하고 재료 변수에 액세스할 수 있습니다.

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

아이콘 목록은 여기에서 찾을 수 있습니다.

Google에서 제공하는 Angular Material 아이콘

Google의 머티리얼 디자인 시스템 아이콘은 모든 프로젝트에서 사용하기 쉽고 900개 이상의 머티리얼 아이콘이 있습니다. <mat-icon> 선택기는 Angular에서 재료 아이콘을 표시합니다. <mat-icon>은 MatIconModule이라는 Angular 재료 모듈의 일부입니다.

<mat-icon> 구성 요소에 합자 텍스트를 넣어 글꼴 합자를 아이콘으로 사용할 수 있습니다.

예시:

<mat-icon>home</mat-icon>

Angular 재료 모듈에서 MatIconModule을 가져와야 합니다.

import {MatIconModule} from '@angular/material/icon'

아이콘 목록은 여기에서 찾을 수 있습니다.