說起雲端 icon 的服務，過往團隊成員大多數都是使用 fontawesome，它不只簡單方便， icon 數量也相當多，並且 fontawesome 的開發者非常努力更新，真的是超好用的。不喜歡工具框架變來變去的我雖早知道 Google Fonts 2018年新增了 Icons 的服務，但始終沒有去使用它，這次專案既然都要使用了，那我們就來好好試試看 Google Fonts 推出的 Material Icons 吧!

幫大家整理非用不可的理由：

• 超過2500個 icons 應有盡有
• 三種基本樣式、四種可調整參數(粗細、重量、填充、密度)
• 除了雲端icon外，也可以下載PNG或SVG
• 可以商用

Google Icons 這邊分成了兩個部分：Material Symbols 和 Material Icons，我這邊整理了一個DEMO網站： Google Material Icons & Symbols DEMO，先參考看看。

一開始搞不清楚甚麼時候該用哪一個時，還真的常常會出錯並且無法調整粗細，後來熟悉整個使用方式時得到一個結論。

Material Symbols 可以自行調整ICON粗細大小跟是否填滿顏色，活用在主要選單上面非常適合，不用怕ICON粗細調性與整體網站不搭，調好在上百戰百勝；而 Material Icons 可快速使用在各個小地方，簡單方便好用。

範例程式碼如下。

步驟一：下列四行複製到head裡

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,Email住址會使用灌水程式保護機制。你需要啟動Javascript才能觀看它,100..700,0..1,-50..200" /><!--全部Outlined-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,Email住址會使用灌水程式保護機制。你需要啟動Javascript才能觀看它,100..700,0..1,-50..200" /><!--全部Rounded-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,Email住址會使用灌水程式保護機制。你需要啟動Javascript才能觀看它,100..700,0..1,-50..200" /><!--全部Sharp-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"><!--全部icon-->

步驟二：假設是使用 Symbols 的狀況可以貼下列css 來控制粗細樣式

.container .material-symbols-outlined {
font-variation-settings:
'FILL' 0,/*是否填滿 0 or 1*/
'wght' 100,/*粗細 100 ~ 700*/
'GRAD' 0,/*視覺平衡粗細 -25 0 200*/
'opsz' 20/*大小*/
}
.container .material-symbols-rounded {
font-variation-settings:
'FILL' 1,/*是否填滿 0 or 1*/
'wght' 100,/*粗細 100 ~ 700*/
'GRAD' 0,/*視覺平衡粗細 -25 0 200*/
'opsz' 20/*大小*/
}
.container .material-symbols-sharp {
font-variation-settings:
'FILL' 0,/*是否填滿 0 or 1*/
'wght' 700,/*粗細 100 ~ 700*/
'GRAD' 0,/*視覺平衡粗細 -25 0 200*/
'opsz' 20/*大小*/
}

步驟三：Google Fonts Icons 查詢想要用的icon並張貼至網站就完工拉!!!!

然後到Google Fonts 官方網站：Material Symbols 和 Material Icons，去尋找各自的標籤語言即可，點此 DEMO 網頁，打開原始碼簡單使用。