[指南] 如何使用 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> 的形式載入即可


程式碼


其他相關文章

  • [筆記] HTML5 InnerHTML InnerText 的差異
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 21
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
  • [面試] 2024 前端工程師面試心得
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
  • [筆記] HTML z-index 父層 子層 和 Stacking Context
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
  • [筆記] Vue3 Teleport Drawer 抽屜實作心得
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 6
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 18 – Breadcrumbs
  • [筆記] Ultimate AWS Certified Developer Associate (178)
  • [筆記] Ultimate AWS Certified Developer Associate (177)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 17 – Infitite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (176)
  • [筆記] Ultimate AWS Certified Developer Associate (175)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 16 – Table
  • [筆記] 使用 Vite TypeScript 模版開發一個 npm 套件
  • [筆記] Ultimate AWS Certified Developer Associate (174)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 15 – Carousel
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 14 – Card
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 13 – Accordion/Collapse
  • [筆記] Ultimate AWS Certified Developer Associate (173)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 12 – Tooltip
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 11 – Badge
  • [筆記] Vue3 + Vite 與 Bootstrap5 合用 Unocss
  • [筆記] Ultimate AWS Certified Developer Associate (172)
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 2
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 10 – Chip/Tag
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 9 – Upload
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 1
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 8 – Rate
  • [筆記] Ultimate AWS Certified Developer Associate (171)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 7 – Slider
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 6 – Form Control
  • [筆記] Ultimate AWS Certified Developer Associate (170)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 5 – Input
  • [筆記] Ultimate AWS Certified Developer Associate (169)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 4 – Checkbox
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 3 – Radio
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 2 – Switch
  • [筆記] Ultimate AWS Certified Developer Associate (168)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button
  • [筆記] Ultimate AWS Certified Developer Associate (167)
  • [筆記] Ultimate AWS Certified Developer Associate (166)
  • [筆記] Ultimate AWS Certified Developer Associate (165)
  • [筆記] Ultimate AWS Certified Developer Associate (164)
  • [筆記] XState React 設計登入模式筆記
  • [筆記] React 自製 Provider 的基礎知識
  • [筆記] Ultimate AWS Certified Developer Associate (162)
  • [筆記] React Select 搭配 Testing Library 進行單元測試
  • [筆記] Ultimate AWS Certified Developer Associate (161)
  • [筆記] XState React 狀態管理初探
  • [筆記] Ultimate AWS Certified Developer Associate (160)
  • [筆記] Ultimate AWS Certified Developer Associate (159)
  • [筆記] React Unit Test 關於路由和套件的模擬 By Jest
  • [筆記] Ultimate AWS Certified Developer Associate (158)
  • [指南] 用 Vite 開發一個 NPM 套件 ( 以 Parse Localized Number 為例 )
  • [筆記] Ultimate AWS Certified Developer Associate (157)
  • [筆記] Ultimate AWS Certified Developer Associate (156)
  • [筆記] React 撰寫元件時 如何保留留下客製化區塊 ( Vue )
  • [筆記] Ultimate AWS Certified Developer Associate (155)
  • [筆記] HTML 巢狀 div 所造成的縮排效果
  • [筆記] React Unit Testing 測試心法
  • [筆記] Ultimate AWS Certified Developer Associate (154)
  • [筆記] React 與 Vue 的實作思維轉換筆記
  • [筆記] 直接用 pre-commit 來檢查 commit 並驅動自動格式檢查
  • [筆記] Ultimate AWS Certified Developer Associate (153)
  • [筆記] Create-React-App TypeScript 加入 webpack alias 別名方法
  • [筆記] React Router DOM Flick 延遲載入元件搭配切換頁面閃爍問題
  • [筆記] Ultimate AWS Certified Developer Associate (152)
  • [筆記] Chakra UI v2 的夜間模式 Dark Mode 的思維模式
  • [筆記] Ultimate AWS Certified Developer Associate (151)
  • [筆記] Google JavaScript Style Guide 閱讀筆記 – 變數命名
  • [筆記] 安裝 react-router-dom v6.4 以後版本出現的路由切換閃爍問題
  • [筆記] 初始化 create-react-app 搭配 pnpm 出現錯誤的解方
  • [筆記] 解決 Delete ‘CR’ eslint (prettier/prettier) 的錯誤
  • [筆記] Github 更新 Personal Access Token
  • [筆記] Ultimate AWS Certified Developer Associate (150)
  • [筆記] React Router DOM 切換頁面短暫出現 Fallback 404 error 的解決方法
  • [筆記] React Hooks 起來 – Ch7 – Vite 佈署到 Github Pages 的注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (149)
  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] Ultimate AWS Certified Developer Associate (148)
  • [筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (147)
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] 如何在 Vite 中取得 Github Action 的變數
  • [筆記] React Hooks 起來 – Ch4 – 增加狀態管理
  • [筆記] Ultimate AWS Certified Developer Associate (146)
  • 按讚加入粉絲團

    延伸閱讀