Angular Material Icon
2018. 3. 18. 20:23
이번에는 밋밋한 디자인에 아이콘을 넣어보겠습니다.
아이콘을 직접 디자인 한다는 것은 쉽지 않으므로...
잘 디자인 된 아이콘을 가져오도록 하겠습니다.
Material Design에는 오픈소스 아이콘이 있습니다.
Angular에도 물론 사용할 수 있지요.
전체 Component에서 아이콘을 사용할 수 있도록 추가합니다.
그러기 위해서 index.html의 header에 다음과 같이 추가합니다.
<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>웹 상의 material icon font를 가져오는 링크입니다.
아이콘을 사용하기 위해 모듈을 추가합니다.
import { MatIconModule } from '@angular/material/icon';
@NgModule({
...,
imports: [
MatIconModule
],
...
})
export class AppModule { }
html에서 아이콘 이름을 이용하여 아이콘을 추가할 수 있습니다.
<mat-icon>account_balance</mat-icon>아이콘 이름은 material icon 사이트의 아이콘을 선택하여 확인 가능합니다.
아이콘 폰트 이름 확인 방법
Angular에서 아이콘을 쉽게 추가할 수 있는 방법이었습니다.
아이콘을 추가한 화면은 아래와 같습니다.
아이콘 추가된 화면
좀 더 그럴듯 해졌죠?
다음에는 화면에 추가된 테이블에 대해 이야기해보겠습니다.
'IT Tech > Angular' 카테고리의 다른 글
| Angular 테스트(Test) 하기 (0) | 2018.04.11 |
|---|---|
| Angular Material Table (0) | 2018.04.02 |
| Angular Material Header Toolbar (0) | 2018.03.11 |
| Angular Directive (Structural Directive) (0) | 2018.02.12 |
| Angular Directive (Attribute Directive) (2) | 2018.02.04 |