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

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

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

Material Symbols 各個軸線的意義

FILL 軸

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

wght 軸

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

GRAD 軸

• 數值介於 -25~200 之間

覺得蠻像效果沒那麼顯著的 wght，查看官方文件有提到使用時機：

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

目前先記錄這樣，如果有新發現再來更新這部份。

opsz 軸

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

這部分可以到官方網站，右邊有簡易的編輯器，可以調整數值看看效果。

Material Symbols 引入方式

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

方法一：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 軸。

方法三：下載到本地

1. 到此官方 Github下載需要的字型檔案
2. 在 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

步驟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 分享就到這裡，若有錯誤歡迎指正，感謝看完這篇的大家。

參考資料

• Google Fonts 官方文件
• Material Symbols