以往開發網頁經常使用到 Google 的 Material Symbols 服務，但大多都是直接引入預設設定，最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已。
仔細看了官方文件之後，才發現原來還有一些設定可以做調整，使用上更加彈性，因此寫了這篇文章記錄下來。
問題一、FILL, wght, GRAD, opsz 這些究竟代表什麼意義？
問題二、需要在一個網頁中同時引入填滿與線框樣式的 icon
接下來就讓我們進入問題一，了解一下 FILL, wght, GRAD, opsz。
Material Symbols 各個軸線的意義
在 Material Symbols 中控制 icon 樣式，主要透過以下四個軸線：
FILL 軸
- 數值只有 0 和 1，0 代表為線框 icon，1 代表填滿的 icon
- 預設值為 0
wght 軸
- 定義筆畫粗細
- 數值範圍介於 100~700 之間，數字越大筆畫越粗
- 會影響到符號的整體大小
GRAD 軸
- 數值介於 -25~200 之間
覺得蠻像效果沒那麼顯著的 wght，查看官方文件有提到使用時機：
- -25：可用在深色背景，減少眩光
- 200：讓符號更佳醒目
目前先記錄這樣，如果有新發現再來更新這部份。
opsz 軸
- 數值介於 20dp 到 48dp 之間
- 筆畫粗細會自動跟著圖示大小改變
這部分可以到官方網站，右邊有簡易的編輯器，可以調整數值看看效果。
Material Symbols 引入方式
有三種方法，差別在於是否需要自定義 icon 樣式，與是否要下載到本地使用
- Google Fonts API - 使用預設設定
- Google Fonts API - 載入變數字體
- 下載到本地
這邊 Google Fonts API 使用上沒有想像中複雜，就是一段 HTML 語法要貼到 <head> 裡而已
方法一：Google Fonts API - 使用預設設定
- 這種方法可以先在 Google Fonts 提供的編輯器做微調，但無法直接在程式碼中進行更改
- 如果網頁設計稿中全部的 icon 都是相同樣式，可以採用該方法
在 HTML 文件的 <head> 裡放入以下語法，即完成引入：
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />如果沒有做任何微調的話，各個軸線的預設數值分別為：
- wght：400
- GRAD：0
- FILL：0
- opsz：48
方法二：Google Fonts API - 載入變數字型
- 此方式可以在程式碼中透過這四個軸，個別設定 icon
- 當網頁設計稿中的 icon 有不同樣式，可使用該方法
在 HTML 文件的 <head> 裡放入以下語法，即完成引入：
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />上面連結裡最後出現的 number..number，代表的是數值使用範圍，例如 20..48，表示的就是 20~48 數值皆可使用，且對應的是 opsz 軸。
方法三：下載到本地
- 到此官方 Github下載需要的字型檔案
- 在 CSS 中引入檔案
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(/material-symbols.woff) format('woff');
}
3. 額外在 CSS 中寫入樣式
因為前面兩個方式是從官方提供的 API 直接引入 icon，預設已帶有這些設定，目前是要自行下載到本地使用，所以設定要另外自己加上去。
如果沒有以下設定，Material Symbols 是會跑不出來的哦
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
介紹到這邊，大致上就知道 Material Symbols 的設定和使用方式，下面我們來一個狀況題吧。
狀況題：在同一網頁載入填滿 / 線框 icon
這邊使用「方法二 Google Fonts API - 載入變數字型」來進行
步驟1：引入變數字型
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />步驟2：在程式碼中自定義樣式
這步驟有兩種做法，使用其中一種就可以囉
【寫法一：在 HTML 標籤的 style 屬性寫入 Google Fonts 的軸線設定】
//直接針對父容器做設定，裡面的 icon 都會一起吃到樣式
//注意這裡的 'FILL' 數值
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
//注意這裡的 'FILL' 數值
<div style="font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 48;">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
【寫法二：使用 CSS 樣式寫入設定】
HTML 檔案
<div class="outline-icon">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
//注意這裡的 'FILL' 數值
<div class="fill-icon">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
CSS 檔案：注意軸線的大小寫一定要相同，不然會失效，像是 'FILL' 不能寫成 'fill'
.outline-icon{
font-variation-settings: 'FILL' 0;
//如果要同時寫入多個設定
//font-variation-settings: 'FILL' 0, 'wght' 700;
}
.fill-icon{
font-variation-settings: 'FILL' 1;
}
這種寫法甚至能夠搭配 animation 語法使用，做一些簡單的動畫哦！
有關 Google 提供的開源圖示 Material Icons 分享就到這裡，若有錯誤歡迎指正，感謝看完這篇的大家。
