Search results for 'material icon'

  1. 2018.03.18 -- Angular Material Icon

Angular Material Icon

2018. 3. 18. 20:23

이번에는 밋밋한 디자인에 아이콘을 넣어보겠습니다.

아이콘을 직접 디자인 한다는 것은 쉽지 않으므로...

잘 디자인 된 아이콘을 가져오도록 하겠습니다.


Material Design에는 오픈소스 아이콘이 있습니다.

https://material.io/icons/

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에서 아이콘을 쉽게 추가할 수 있는 방법이었습니다.

아이콘을 추가한 화면은 아래와 같습니다.


아이콘 추가된 화면


좀 더 그럴듯 해졌죠?

다음에는 화면에 추가된 테이블에 대해 이야기해보겠습니다.


소스주소: https://github.com/jsrho1023/account-book

'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

TechTrip IT Tech/Angular