はじめに
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>
結果、
こんな感じにテーマが切り替わって表示される。