これは何

フォントとして読み込んで便利なアイコンとして使える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>

みためこんな感じになるやつ。

公式ページから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>