FONT
Google Material icons 表示
インラインでの記述
ロクにマニュアル（解説サイト含む）を読まず、
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">を読み込んだあと、
https://fonts.google.com/icons
の初期表示でアイコンを選んで、例えば以下をコピペしたら
<span class="material-icons-outlined">
logout
</span>見事に表示されなかった。。
どうやら公式サイト上部の
Outlined、Filled、Rounded、Sharp、Two toneで読み込むスタイルが異なるらしい。
?family=Material+IconsだとFilledのみが対象となる。
全てをまとめて表示可としたかったら、
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">とすることで一括指定ができる。
重くなったりするのかな。。
before after 疑似要素での表示
.target {
&::after {
font-family: 'Material Icons';
content: "\e9ba";
}
}