Note

Note
RoundedスタイルのMaterial Symbolを擬似要素で表示させる
HTML
<span class="icon icon--account_circle">account_circle</span>

CSS
/* Material Symbols（Rounded）読み込み */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0,0');

/* カスタムプロパティ */
:root {
   --icon: 'Material Symbols Rounded';
   --icon-variation: 'opsz' 24, 'wght' 200, 'FILL' 0, 'GRAD' 0;
}

/* アイコン共通スタイル：絶対必要な部分（2行） */
.icon::before {
   font-family: var(--icon);
   font-variation-settings: var(--icon-variation);
}
/* 各アイコン：content内はIcon nameで表示可能 */
.icon--account_circle::before {
   content: "account_circle";
}

よく使いそうなアイコン一覧（CodePen）
codepen

Page Top