【Angular Material】Icon의 테마를 바꾸고 싶다.
3078 단어 AngularangularMaterial
소개
Angular Material Icon 에서 사용 가능한 아이콘 목록 에는 베이스가 되는 것 외에 「Outlined」 「Rounded」 「Two-Tone」 「Sharp」라는 테마가 준비되어 있다.
이번에는 이것을 전환하는 방법에 대해 공유한다.
전제
이미
ng add 명령으로 Angular Mateiral을 도입한 전제로 진행한다.Google Fonts 로드
index.html 의 <head></head> 안에 있는 Google Fonts의 Material Icon 스타일을 로드하는 부분.index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
여기에 사용하고 싶은 테마를
| 로 연결하여 추가한다.대응하는 링크와 테마는 이하.
아이콘 테마
추가할 링크
Outlined
Material+Icons+Outlined
Rounded
Material+Icons+Rounded
Two-Tone
Material+Icons+Two+Tone
Sharp
Material+Icons+Sharp
(예)
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone" rel="stylesheet">
아이콘에 테마를 fontSet 지정
테마를 바꾸고 싶은 아이콘에
fontSet를 붙이는 것만으로 바꾼다.해당 아이콘 테마와
fontSet 는 다음.아이콘 테마
fontSet
Outlined
material-icons-outlined
Rounded
material-icons-round
Two-Tone
material-icons-two-tone
Sharp
material-icons-sharp
(예)
example.component.html
<mat-icon>backup</mat-icon>
<mat-icon fontSet="material-icons-outlined">backup</mat-icon>
<mat-icon fontSet="material-icons-two-tone">backup</mat-icon>
결과,
이런 느낌으로 테마가 바뀌어 표시된다.
참고 사이트
Reference
이 문제에 관하여(【Angular Material】Icon의 테마를 바꾸고 싶다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masaks/items/e6e55063b91c5ad5e2c4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
