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

傑米

發佈於文科腦程式之旅

2023/07/05閱讀時間約 11 分鐘

以往開發網頁經常使用到 Google 的 Material Symbols 服務，但大多都是直接引入預設設定，最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已。

仔細看了官方文件之後，才發現原來還有一些設定可以做調整，使用上更加彈性，因此寫了這篇文章記錄下來。

Google Fonts - Material Icons 介面

如果使用 Material Symbols 時你也有過以下疑問，這篇都會提到：

問題一、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,[email protected],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,[email protected],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 分享就到這裡，若有錯誤歡迎指正，感謝看完這篇的大家。