Angular Material Iconのテーマを切り替えたい
はじめに
Angular Material Icon で 使えるアイコン一覧にはベースとなるものの他に「Outlined」「Rounded」「Two-Tone」「Sharp」というテーマが用意されている。
今回はこれの切り替え方について共有していく。
前提
すでに ng add
コマンドでAngular Mateiralを導入した前提で進める。
Google Fontsの読み込み
index.html
の <head></head>
内にあるGoogle FontsのMaterial Iconのスタイルを読み込んでいる部分。
<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 |
(例)
<mat-icon>backup</mat-icon>
<mat-icon fontSet="material-icons-outlined">backup</mat-icon>
<mat-icon fontSet="material-icons-two-tone">backup</mat-icon>
結果、
こんな感じにテーマが切り替わって表示される。
Top comments (0)