DEV Community

masaks
masaks

Posted on

Angular Material Iconのテーマを切り替えたい

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>

結果、

material icon

こんな感じにテーマが切り替わって表示される。

参考サイト

Top comments (0)