【Material Symbols】 「スタイル」の変更や「塗りつぶし」をする

こんにちは、さち です。

先日、「Material Symbols」のアイコンの「スタイル」を変更したい＆「塗りつぶし」をしたいことがありました。

方法自体は難しくないんですが、次回使うときに忘れていそうなんですよね……。

ということで、備忘録としてこの記事を残しておきます。

スタイル

サンプル

「download」アイコンを、各「スタイル」で表示したときの違いです。

「rounded」は角が丸く、「sharp」は角がカクカク。「outlined」は、「rounded」と「sharp」の中間的なデザインです。

アイコンによっては、「スタイル」の違いが分かりにくいもの、そもそも違いがないものがあります。

ソース

<!-- ラウンド(rounded) -->
<span class="material-symbols-rounded">download</span>

<!-- 通常(outlined) -->
<span class="material-symbols-outlined">download</span>

<!-- シャープ(sharp) -->
<span class="material-symbols-sharp">download</span>

class 名の末尾を rounded outlined sharp のどれにするかで「スタイル」が変わります。

塗りつぶし（FILL）

サンプル

上段は「通常」、下段は「塗りつぶし」をしたものです。

ソース

<!-- 通常 -->
<span class="material-symbols-rounded">stars</span>
<span class="material-symbols-rounded">water_drops</span>
<span class="material-symbols-rounded">coffee</span>
<span class="material-symbols-rounded">planet</span>

<!-- 塗りつぶし(FILL)を適用 -->
<span class="material-symbols-rounded fill">stars</span>
<span class="material-symbols-rounded fill">water_drops</span>
<span class="material-symbols-rounded fill">coffee</span>
<span class="material-symbols-rounded fill">planet</span>

.fill {
  font-variation-settings: 'FILL' 1;
}

「CSS」の font-variation-settings プロパティに 'FILL': 1 と記述することで、アイコンを塗りつぶすことができます。

ちなみに、FILL の値は 0 ～ 1 の間を入力することもでき、中心から「塗りつぶし」が広がっていくアニメーションのコマ送りになっています。上手く使えば animation 以外にも活用法があるかもしれません。

太さ（wght）

サンプル

上段は「通常」、下段は「wght を最細～最太に変化」させたものです。

ソース

<!-- 通常 -->
<span class="material-symbols-rounded">stars</span>
<span class="material-symbols-rounded">water_drops</span>
<span class="material-symbols-rounded">coffee</span>
<span class="material-symbols-rounded">planet</span>

<!-- 太さ(wght)を適用 -->
<span class="material-symbols-rounded wght">stars</span>
<span class="material-symbols-rounded wght">water_drops</span>
<span class="material-symbols-rounded wght">coffee</span>
<span class="material-symbols-rounded wght">planet</span>

.wght {
  animation: wght 2s ease-in-out infinite alternate;
}

/* 太さ(wght)を最細～最太にアニメーション */
@keyframes wght {
   0%,  10% { font-variation-settings: 'wght' 100; }/* 最細 */
  90%, 100% { font-variation-settings: 'wght' 700; }/* 最太 */
}

wght の値は 100 ～ 700 を指定できます。100 が一番細く、700 が一番太くなります。

wght を指定しない場合（通常）は 400 になります。

参考資料

Material Symbols guide | Google Fonts | Google for Developers