技術資料

とても便利なので愛用している Google Fonts の Material Symbols and Iconsの使い方を改めてメモ。

head 要素内でスタイルシート読み込み

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">

CSSを追加

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 1rem;
    vertical-align: -3px;
}

Material Symbols and Icons のサイトのサンプルでは、font-variation-settingsのプロパティのみ指定されていますが、font-size や vertical-align も指定しておくと、メニューとかにアイコンとテキストを並べて使ったときに、綺麗に揃って良いと思います。

サンプル

<ul>
    <li><span class="material-symbols-outlined">dashboard</span>ダッシュボード</li>
    <li><span class="material-symbols-outlined">mail</span>お問合せ一覧</li>
    <li><span class="material-symbols-outlined">description</span>記事一覧</li>
    <li><span class="material-symbols-outlined">logout</span>ログアウト</li>
</ul>

• dashboardダッシュボード
• mailお問合せ一覧
• description記事一覧
• logoutログアウト