Google Fonts 推出 Material Icons 免費圖示字型，收錄兩千個圖案五種樣式

五年前 Google I/O 大會 Google 釋出數百個 Material Icons 免費圖示，這些圖案不僅會應用到自家產品開發，也將它開放原始碼放到 GitHub 網站上讓使用者免費下載使用，可自由使用於個人或商業用途。時至今日已累積超過 2000 多種不同圖案，並有五種樣式可供選擇，這些圖案對於在傳達一些概念或想法上尤其重要，特別是在數位環境使用者介面更是無所不在。

上週 Google 宣布將在 Google Fonts 加入一系列開放原始碼圖示字型，首要素材就從自家的 Material Icons 開始！這也意味著未來在開發或設計時取用這些漂亮的圖示圖案變得更為簡單，只要載入一段 Google 網頁字型（Web Fonts）網址，在適當位置即可使用 CSS 顯示或自訂圖示顏色或樣式。

Google Material Icons 圖示集收錄各種常用符號，提供五種樣式（外框、填滿、圓角、銳利和雙色），分類包括 Action、Alert、Audio、Communication、Content、Device、Editor、File、Hardware、Home 等等，圖示有 18dp、24dp、36dp 和 48dp 四種尺寸，也可下載為 SVG、PNG 格式。

Icons – Google Fonts
https://fonts.google.com/icons

使用教學

STEP 1

開啟 Google Fonts 的「Icons」頁面就會看到完整的 Material Icons，上方有搜尋框可輸入關鍵字快速查找相關圖示，右上角選擇特定圖示分類，每個圖案都有預覽圖和名稱，更易於辨識或搜尋。

預設情況會顯示 Material Icons 所有圖示圖案，也可點選分類顯示特定內容，如果不確定圖案會在那一分類中，也可將網頁往下拖曳手動尋找。

STEP 2

從 Google Fonts 可以即時預覽五種樣式效果：Outlined、Filled、Rounded、Sharp 和 Two tone，點選後會立即更新下方圖示集圖案。

STEP 3

點選 Material Icons 任一圖案後，右側會跳出相關選項，分別是運用於網頁（圖示字型）或是在 Android、iOS 應用程式使用，可選擇密度、尺寸大小和顏色，下方就會有嵌入網頁的代碼快速複製。

除此之外，也能下載為 SVG 向量圖或常見的 PNG 圖片格式。

STEP 4

Material Icons 有四種尺寸可以調整：18dp、24dp、36dp 和 48dp，使用者也可透過 CSS 方式調整大小、顏色或是進行更多更細部設定。

STEP 5

如果要將 Material icons 以圖示字型方式加入網頁，可參考 Material Icons Guide 教學文件的「Icon fonts for the web」部分，在方法一就有一串從 Google Fonts 快速設定的方式（若有速度上的考量，也能自行託管檔案）。