[指南] 如何使用 Google 所提供的 Material Icon

Google 所維護的 Material icon 是一個公開且可商用的資料庫,由於是向量圖形式,所以無論螢幕尺寸是何大小,都可以輕鬆的看清楚。預設提供 SVG, PNG 和 icon Font 三種型式,且有 18, 24, 36 和 48 px 四種大小。
material icon


如何使用

1. 在載入網頁使用前,記得有先行載入圖示字型 – Google Fonts,直接用 CDN 的方式引入即可。
2. 點選右上角的 Resources,然後搜尋你要的圖示名稱
material-icon list 3. 以 <i class=”material-icons”>Icon Name</i> 的形式載入即可


程式碼


其他相關文章

  • [筆記] 程式必修課!離散數學與演算法 – 119
  • [筆記] 實作簡易 PrimeVue4 DataTable 卡片版本
  • [筆記] Nuxt3 切換頁面自動重置所有 Pinia Store 的狀態
  • [筆記] 程式必修課!離散數學與演算法 – 118
  • [筆記] Vue3 實作 Chart.js Composable – 以折線圖為例子
  • [筆記] ‘__VLS_ctx.$t’ is of type ‘unknown’ Vue-i18n
  • [筆記] 程式必修課!離散數學與演算法 – 117
  • [筆記] chartjs-plugin-datalabels 在 Chart.js 產出的圖表上加 label
  • [筆記] vue-router 避免跳頁傳送未事先定義的變數
  • [筆記] 程式必修課!離散數學與演算法 – 116
  • [筆記] PrimeVue4 參考既訂主題進行微調方法
  • [筆記] 程式必修課!離散數學與演算法 – 115
  • [筆記] PrimeVue4 利用 PanelMenu 和 TieredMenu 實作 Sidebar
  • [筆記] Nuxt3 使用 useState 於 layout、components、composable、middleware、pages 共享資料 – 全域登入與生成路由清單
  • [筆記] 程式必修課!離散數學與演算法 – 114
  • [筆記] Nuxt3 bundle 結果視覺化呈現 揪出那些特別龐大的 js
  • [筆記] VS Code 搭配 Nuxt3 解決 /.well-known/appspecific/** 問題
  • [筆記] 程式必修課!離散數學與演算法 – 113
  • [筆記] 程式必修課!離散數學與演算法 – 112
  • [筆記] 程式必修課!離散數學與演算法 – 111
  • [筆記] Tailwindcss 3 升 4 後維持原有 3 的樣式內容
  • [筆記] 程式必修課!離散數學與演算法 – 110
  • [筆記] wangEditor 5 搭配 Tailwindcss 4 的樣式衝突問題
  • [筆記] Vite 開發遇上 431 Request Header Fields Too Large
  • [筆記] 程式必修課!離散數學與演算法 – 109
  • [筆記] 動態監聽元素高度 JavaScript Vue 自製 hook
  • [筆記] 程式必修課!離散數學與演算法 – 107
  • [筆記] 實作 ColorPicker Vue3 元件
  • [筆記] Vue3 運用 Pinia 實踐前端篩選排序的邏輯建議
  • [筆記] VS Code 修正 command not found: code 錯誤
  • [筆記] 程式必修課!離散數學與演算法 – 105
  • [筆記] Vue3 實作拖曳點擊上傳結合圖片預覽元件
  • [筆記] 程式必修課!離散數學與演算法 – 104
  • [筆記] 端對端 E2E 前端測試 自動開啟瀏覽器 start-server-and-test
  • [筆記] 程式必修課!離散數學與演算法 – 102
  • [筆記] 調整系統時間 模擬未來 new Date()
  • [筆記] 程式必修課!離散數學與演算法 – 101
  • [筆記] 程式必修課!離散數學與演算法 – 100
  • [筆記] Node.js http-proxy-middleware 部分更改路由 pathRewrite
  • [筆記] Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0
  • [筆記] import type 和 import 的差異 TypeScript
  • [筆記] Nuxt3 加入 Sentry 相關設定和注意事項
  • [筆記] 程式必修課!離散數學與演算法 – 97
  • [筆記] Vite-ssg 執行完成後進行自動化操作並壓縮
  • [筆記] 重新命名 Github Repo 名稱並更換已下載的 Repo 路徑位置
  • [筆記] 程式必修課!離散數學與演算法 – 96
  • [筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器 – 2
  • [筆記] 程式必修課!離散數學與演算法 – 95
  • [筆記] HTML 按鈕上用 after 偽元素作對角線
  • [筆記] 程式必修課!離散數學與演算法 – 94
  • [筆記] 程式必修課!離散數學與演算法 – 93
  • [筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器
  • [筆記] Nuxt3 使用錨點導航導致 router meta 資料遺失的替代方案
  • [筆記] 程式必修課!離散數學與演算法 – 92
  • [筆記] 用 media query 來撰寫僅支援 hover 的樣式
  • [筆記] 程式必修課!離散數學與演算法 – 91
  • [筆記] 程式必修課!離散數學與演算法 – 90
  • [筆記] Tailwindcss 4 Dark Mode 靜態與動態設值
  • [筆記] 程式必修課!離散數學與演算法 – 89
  • [筆記] 程式必修課!離散數學與演算法 – 87
  • [筆記] 程式必修課!離散數學與演算法 – 86
  • [筆記] 程式必修課!離散數學與演算法 – 85
  • [筆記] 程式必修課!離散數學與演算法 – 84
  • [筆記] 程式必修課!離散數學與演算法 – 83
  • [筆記] 程式必修課!離散數學與演算法 – 82
  • [筆記] 解決 Nuxt3 SSG 靜態網站生成過多 js 檔的問題
  • [筆記] 程式必修課!離散數學與演算法 – 81
  • [筆記] 程式必修課!離散數學與演算法 – 80
  • [筆記] TailwindCSS 4 在 Vue3 與 SCSS 共用
  • [筆記] 程式必修課!離散數學與演算法 – 79
  • [筆記] 程式必修課!離散數學與演算法 – 78
  • [筆記] 程式必修課!離散數學與演算法 – 77
  • [筆記] UI Lib Picker 挑選適合你的 Vue3 UI Library
  • [筆記] 程式必修課!離散數學與演算法 – 76
  • [筆記] Nuxt3 搭配 mk-cert 使用 https 進行開發
  • [筆記] 程式必修課!離散數學與演算法 – 75
  • [筆記] 程式必修課!離散數學與演算法 – 74
  • [筆記] 程式必修課!離散數學與演算法 – 73
  • [筆記] 程式必修課!離散數學與演算法 – 72
  • [筆記] 程式必修課!離散數學與演算法 – 71
  • [筆記] 程式必修課!離散數學與演算法 – 70
  • [筆記] Vite 結合 mk-cert https 開發環境
  • [筆記] 程式必修課!離散數學與演算法 – 69
  • [筆記] 程式必修課!離散數學與演算法 – 68
  • [筆記] 程式必修課!離散數學與演算法 – 67
  • [筆記] 程式必修課!離散數學與演算法 – 66
  • [筆記] 程式必修課!離散數學與演算法 – 65
  • [筆記] 程式必修課!離散數學與演算法 – 64
  • [筆記] 程式必修課!離散數學與演算法 – 63
  • [筆記] 程式必修課!離散數學與演算法 – 62
  • [筆記] 程式必修課!離散數學與演算法 – 60
  • [筆記] 程式必修課!離散數學與演算法 – 59
  • [筆記] 程式必修課!離散數學與演算法 – 58
  • [筆記] 程式必修課!離散數學與演算法 – 57
  • [筆記] 程式必修課!離散數學與演算法 – 56
  • [筆記] 程式必修課!離散數學與演算法 – 55
  • [筆記] 修正 ResizeObserver loop limit exceeded 錯誤
  • [筆記] 程式必修課!離散數學與演算法 – 54
  • [筆記] 程式必修課!離散數學與演算法 – 53
  • [筆記] 程式必修課!離散數學與演算法 – 52
  • 按讚加入粉絲團

    延伸閱讀