Material Icons

Material Icons > Material Icons Guide

1 需先 Material Icons Guide 中找到該 icon 的 CDN

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

2 點擊想要載入的 icon 即可從右欄找到程式碼

https://imgur.com/xxyamO6.png

載入上述 CDN 會發現需移除 outlined 的部分,才能正確載入 icon ,可使用下列 CDN 便能載入各個樣式,像是:outline、filled、rounded、sharp、two tone(不須移除 outline)。

<link href="<https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined%7CMaterial+Icons+Two+Tone%7CMaterial+Icons+Round%7CMaterial+Icons+Sharp>" rel="stylesheet">

Material Symbols

Material Symbols

選擇想要使用的 Icon

點選 icon,出現右側欄

https://i.imgur.com/yDPBmc9.png

Static icon font 區塊中 <link> 程式碼貼至 <head> 內 >可載入以下 CDN (此 CDN 為樣式 outline ,欲載入其他樣式需至該 icon 取得 CDN )

<link rel="stylesheet" href="<https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0>" />

Inserting the icon 區塊中程式碼貼至 HTML 區塊內 Material Symbols 載入範例

Material Symbols 與 Material Icons 相同為 Google 提供的 Icon 服務, 差異為 * Material Icons 無法透過官方設定做相關 Icon 的調整。 * Material Symbols 能更有彈性的調整 Icon (可參考此官方文件)。

若需對於不同區塊的 Icon 做調整,可參考此官方提供的 CodePen,使用div進行設定並包裹所需的元素。

IcoFont

IcoFont 是另外一種 icon 圖源,但載入方式相較起來更為複雜,可以跟著步驟嘗試載入。