InnerHtml에 대해

InnerHtml을 이용하여 아래코드를 적용하면 제대로 되지 않는다.

<mat-icon>keyboard_double_arrow_left</mat-icon>

 

 

페이지를 디버깅해보면 keyboard_double_arrow_left 라고만 나온다.

 

이럴때는 .ts 에서 sanitizer.bypassSecurityTrustHtml() 를 사용하거나

 

.html 에서 [innerHtml]="item.value | sanitizedHtml" 를 적용해줘야 한다.

 

 

 

추가적으로 이럴때는 일반 페이지에 상단의 코드를 넣고 디버깅을 해보면 class 가 추가되어 있는것을 볼수 있다.

class 정의만 복사하여 적용하면 정상적으로 나온다.

 

 

아래는 정상적으로 나오는 html 문

<mat-icon class="mat-icon notranslate material-icons mat-ligature-font mat-icon-no-color">keyboard_double_arrow_left</mat-icon>

 

 

Material Icon 사이트 링크

https://fontawesomeicons.com/materialdesign/icons

Material Design Icons, Material UI, Vuetify List- Get All latest Materialdesign icons- Use Easily in HTML, CSS - Materialdesigni