これは何
フォントとして読み込んで便利なアイコンとして使えるMaterial Iconについての小ネタ。
公式： https://material.io/tools/icons/?style=baseline
名称を指定したときにデフォルトだとFilledのアイコンが使われるが、どうやったらoutlineｄのアイコンが使えるかというのを調べたことを書いておきます。
基本的な使い方
みためこんな感じのアイコン。bookを使います。画像はデフォルトのfilledのもの。
フォントとして読み込みます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
classに 指定します。
<i class="material-icons">book</i>
outlined のアイコンの使い方
みためこんな感じになるやつ。
公式ページからSVGとしてダウンロードして使ってもいいのですが、面倒なのでFilledと同じ方法で使えないのか？と思って調べてみたら、簡単な方法がありました。
以下のようにMaterial+Icons+Outlinedも読み込みます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined" rel="stylesheet">
クラス名も -outlined をつけます。
<i class="material-icons-outlined">book</i>
もっと簡単な方法で使える方法？
error とか、よくある16個の図形は、フォントとして追加で読み込まないでクラス名もそのままで使えるとか。ただし、error_outline のようにアンダーバーで名前を変える。
<i class="material-icons">error_outline</i>