WebFontでマテリアルアイコンが使える

GoogleFontsといえば、Googleが提供する無料で利用できるWebフォントのCDNですが、気づいたら、Iconも使えるようになっていました。

https://fonts.google.com/icons

読み込み方法はGoogleFontsとほぼ同じ。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

対象となるアイコンのCSSを読み込むだけです。

実際にアイコンを表示する場合は

<span class="material-icons-outlined">
verified
</span>

とマテリアルアイコンのクラス指定と利用するアイコンも名称？を普通に描くだけです。

これでアイコンが表示されるのはなんとも不思議。

GoogleFontsのページに掲載されているアイコンをクリックすると上記のようなタグが表示されるので、コピペしてはるだけでOK。詳しい使い方や推奨するサイズなどの指定方法はこちらのページにサンプルがのっています。