[angular] 앵귤러 사용자 material icon 사용 방법

 

인터넷에서 다운받거나 개인이 생성한 material icon을 사용하는 방법을 소개 합니다.

src 경로만 잡아주면 좋을텐데 귀찮은 몇가지 설정을 해야 합니다.

 

1. icon 준비

인터넷에서 무료 아이콘을 다운로드 받거나 직접 제작한 icon을 준비 합니다.

준비된 아이콘을 프로젝트의 assets 디렉토리에 저장 합니다.

 

/src/assets/images/ alarm_on-24px.svg

저는 이렇게 저장이 되어 있습니다.

 

2. 설정 및 등록

 

웹에서 사용자 정의 아이템을 사용 할 수 있도록 설정을 하고 아이콘을 등록하는 작업을 수행 합니다.

 

/src/app/app.module.ts

파일을 열고 사용자 정의 모듈을 import 합니다.

import { HttpClientModule } from '@angular/common/http';

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule
  ],

 

/src/app/material-test/material-test.component.ts

파일을 열고 아이콘을 등록 합니다.

아이콘 path는 보안을 위해 DomSanitizer를 이용 합니다.

import { DomSanitizer } from '@angular/platform-browser';

import { MatIconRegistry } from '@angular/material';

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'alarm_on',
        sanitizer.bypassSecurityTrustResourceUrl('assets/images/alarm_on-24px.svg'));
}

설정은 이렇게 하면 끝입니다.

 

3. icon 출력

이제 아이콘을 사용하여 화면에 표시만 하면 됩니다.

/src/app/material-test/material-test.component.html

파일을 열고 아이콘을 사용합니다.

<mat-icon svgIcon="alarm_on"></mat-icon>

출력을 해봅니다.

이런식으로 사용 하면 됩니다.

4. Source Code

 

기존 icon code에 추가했습니다.

 

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

 

/src/app/material-test/material-test.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';


@Component({
  selector: 'app-material-test',
  templateUrl: './material-test.component.html',
  styleUrls: ['./material-test.component.css']
})
export class MaterialTestComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'alarm_on',
        sanitizer.bypassSecurityTrustResourceUrl('assets/images/alarm_on-24px.svg'));
  }


  ngOnInit() {
  }
}

/src/app/material-test/material-test.component.html

<mat-icon svgIcon="alarm_on"></mat-icon>

- copy coding -