Material Icons CDN 引入全攻略 - 引入各種類別的 Icon

傑米

更新於 2023/08/22發佈於 2023/08/22閱讀時間約 6 分鐘

這篇主要會透過 CDN 引入 Material Icons，並補足官方文件裡只有提到 Filled 類別的引用方式，但沒有提到其他類別的 CDN，像是 Outlined、Rounded、Sharp、Two tone 這些類別。

另外還會提到如何透過偽元素加入 Material Icons，現在我們就來看看如何引入吧！

步驟一：尋找想要引入的 icon 類別與程式碼

在 <head> 引入該類別的 CDN

官方文件主要是以 Filled 類別做示範，但沒有提及到引入其他類別的 CDN，主要是在原來的 CDN 連結後面加入 [+類別名稱]（但 Rounded 是例外），範例如下：

Filled：不用加入任何類別，預設就是 Filled 類別的 icon

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Outlined

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
/>

Rounded：要特別注意是加入 Round，不是 Rounded

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
/>

Sharp

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
  rel="stylesheet"
/>

Two tone：注意兩個單字被拆開來加入

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
/>

到 Google Icons 找尋指定 icon

Material Icons 官網

點擊 icon 後會開啟右方的面板，先複製紅框處的程式碼，就能接續下個步驟引入到自己的網頁中，兩個方法擇一即可

Material Icons 官網

步驟二：引入到 HTML 中

方法1：直接貼入程式碼

<span class="material-icons-outlined"> search </span>

方法2：透過偽元素寫入到 HTML 中

很適合用在有大量重複的 icon，例如列表圖案。這裡的 font-family 是重點！如果沒有寫入正確的值就不會有效果，但在官方文件中也是除了 Filled 之外，沒有提到不同類別的 font-family 的命名，測試後整理如下：

Filled: "Material Icons"
Outlined: "Material Icons Outlined"
Sharp: "Material Icons Sharp"
Rounded: "Material Icons Round"
Two tone: "Material Icons Two Tone"

.list-icon li::before {
  content: "search";
  font-family: "Material Icons Outlined";
}

這樣就大功告成了！附上完整的程式碼，供大家複製過去看看效果～

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
    <style>
      .list-icon li::before {
        content: "lightbulb";
        font-family: "Material Icons Outlined";
      }
    </style>
  </head>
  <body>
    <span class="material-icons-outlined"> search </span>
    <ul class="list-icon">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
  </body>
</html>