在網頁中加入預設或自定義 icon 通通搞定 - Material Symbols 使用攻略

問題一、FILL, wght, GRAD, opsz 這些究竟代表什麼意義？

問題二、需要在一個網頁中同時引入填滿與線框樣式的 icon

Material Symbols 各個軸線的意義

FILL 軸

• 數值只有 0 和 1，0 代表為線框 icon，1 代表填滿的 icon
• 預設值為 0

wght 軸

• 定義筆畫粗細
• 數值範圍介於 100~700 之間，數字越大筆畫越粗
• 會影響到符號的整體大小

GRAD 軸

• 數值介於 -25~200 之間

• -25：可用在深色背景，減少眩光
• 200：讓符號更佳醒目

opsz 軸

• 數值介於 20dp 到 48dp 之間
• 筆畫粗細會自動跟著圖示大小改變

Material Symbols 引入方式

1. Google Fonts API - 使用預設設定
2. Google Fonts API - 載入變數字體
3. 下載到本地

方法一：Google Fonts API - 使用預設設定

• 這種方法可以先在 Google Fonts 提供的編輯器做微調，但無法直接在程式碼中進行更改
• 如果網頁設計稿中全部的 icon 都是相同樣式，可以採用該方法

<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 有不同樣式，可使用該方法

<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" />

方法三：下載到本地

1. 到此官方 Github下載需要的字型檔案
2. 在 CSS 中引入檔案

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(/material-symbols.woff) format('woff');
}

.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;
}

狀況題：在同一網頁載入填滿 / 線框 icon

步驟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：在程式碼中自定義樣式

//直接針對父容器做設定，裡面的 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>　　

<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>

.outline-icon{
　 font-variation-settings: 'FILL' 0;
　 //如果要同時寫入多個設定
　 //font-variation-settings: 'FILL' 0, 'wght' 700;
}

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

參考資料

• Google Fonts 官方文件
• Material Symbols