Google Material Symbolsを使う

Google Material Symbols

アイコンを探す … Material Symbols
↑ 旧ver.のMaterial Icons より太さや強調、黒地白地など詳細に設定できる。

Material Symbols 使い方


<!--Outlinedを読み込む場合-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

//ほとんどの場合 Outlined だけで足りる。Rounded または Sharp が必要なら追加で読み込む。

<!--Roundedを読み込む場合-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<!--Sharpを読み込む場合は-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

URLのパラメータの＠以降に必要な可変軸の値を指定して、必要なセットだけ設定することもできる。

例：

Optical size: 48
光学サイズ：デフォルト：48px （20px 〜 48pxで指定） アイコンを拡大する時には値を大きくする
Weight: 500
線の太さ：デフォルト：400, 100（細い）〜700（太い）の間で100刻み
Fill: 0 ~ 1
塗りつぶしなし：0, 塗りつぶし状態：1
Grade: -25 ~ 0
グレード：デフォルト：0,
-25 (低)〜200 (高強調)で指定可. 暗い背景では低い値に,アイコンを強調するには高い値にする

arrow_downward arrow_downward arrow_downward 


.material-symbols-outlined {     /*-outlined 部分はHead内linkタグで読み込んだ種類と一致させること -Rounded , -Sharp*/
	font-variation-settings:
		'opsz' 48,
		'wght' 500,
		'FILL' 0..1,
		'GRAD' -25..0,
	}

arrow_downward arrow_downward arrow_downward

<link rel="stylesheet" href="https://fonts.
googleapis.com/css2?family=Material+Symbols+Outlined:
opsz,wght,FILL,GRAD@48,500,0..1,-25..0>

HTMLに埋め込む場合は…

Material Symbolsでアイコンを選ぶと、ページの右側に以下のようなタグが表示される。（例はscheduleアイコンの場合）


例：
<span class="material-symbols-outlined"> schedule </span>

上の例をBODY内に埋め込むとこうなる。
schedule

個別にスタイルを適用するには…

schedule ← 拡大した（60px） 

<span class="material-symbols-outlined symbols-size60"> schedule </span>


例：
.symbols-size60 {
	font-size:60px;
	font-variation-settings:
		'opsz' 60;
	}

擬似要素で設定する

検索する


<p><a href="#" class="search-btn">検索する</a></p>


.search-btn {
	display: flex;
	align-items: center;
	font-size: 20px;
	}
.search-btn::before {
	font-family: "Material Symbols Outlined";
	content: "search";
	font-variation-settings:
		'opsz' 40,
		'wght' 700;
	font-size: 40px;
	}
.search-btn:hover {
	text-decoration: none;
	}

擬似要素で設定する（ユニコード）

検索する


<p><a href="#" class="search-btn2">検索する</a></p>


.search-btn2 {
	display: flex;
	align-items: center;
	font-size: 20px;
	}
.search-btn2::before {
	font-family: "Material Symbols Outlined";
	content: "\e8b6";　　　　// searchなどのアイコン名でもOK
	font-variation-settings:
		'opsz' 40,
		'wght' 300;
	font-size: 40px;
	font-weight: 300;
	}
.search-btn2:hover {
	text-decoration: none;
	}

TOP