[css]疑似要素でMaterial Iconsを使用する方法

Googleのやつ。

Material IconsはGoogleから独立した感じでFontawesomeみたいな感じでアイコンを作って配布してくれてたのが、気がついたらGoogleFontsに追加されてた。で、僕は普段疑似要素に突っ込んで使うので、まずはそのやり方。

基本形

@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
a::before{
    content: "\e5cc";
    font-family: "Material Icons";
}

fontawesomeよりもシンプル。font-weightの指定も何もいらない。

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...

fonts.google.com

contentの内容は「Code point」のところを引っ張ってくればいい。

バリエーションについて

Fontawesomeでいうfont-weightみたいな感じで、Material IconsにはFilledとかRoundedとかでバリエーションがある。font-familyを読み込んで指定になるのでややこしい。

//ノーマル
@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
//Rounded
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round');

googleのフォントはまとめて1行で書けるんで、こんな感じにできる。

//ノーマル + Rounded
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Round');

font-family名は「Icon font」のclass名準拠。

a::before{
    content: "\e5cc";
    font-family: "Material Icons Round";
}

こんな感じ。font-familyを変えてもコードはそのまま。
font-familyは全部小文字でも読んでくれるので地味に楽。

こうしてまとめてみると、どうも表記にまとまりがない。

まとめ

デザイン変更はfont-familyを変える。最初にちゃんと宣言しておけばそれで済む。font-familyの種類がちゃんと把握できてること、その際の表記を間違わないこと、気をつけるのはそのあたりっていうか、それが地味にめんどくさいのでだるい。

Material Iconsは優秀なんだけど、サービスとかブランドのアイコンがない。その点ではFontawesomeの方が便利だなーと、使い分けとか共存とかが見えてくるので完全な乗り換えは無理かな。