Google 所維護的 Material icon 是一個公開且可商用的資料庫，由於是向量圖形式，所以無論螢幕尺寸是何大小，都可以輕鬆的看清楚。預設提供 SVG, PNG 和 icon Font 三種型式，且有 18, 24, 36 和 48 px 四種大小。
如何使用
1. 在載入網頁使用前，記得有先行載入圖示字型 – Google Fonts，直接用 CDN 的方式引入即可。
2. 點選右上角的 Resources，然後搜尋你要的圖示名稱
3. 以 <i class=”material-icons”>Icon Name</i> 的形式載入即可
程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// HTML 部分 <head> .......(ignored) <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <i class="material-icons md-18">notifications_active</i> <i class="material-icons md-24">notifications_active</i> <i class="material-icons md-36">notifications_active</i> <i class="material-icons md-48">notifications_active</i> // CSS 部分 由於官方的 css，只有內建 24px 的樣式，你可以自定以下的 CSS class，這樣可以輕鬆使用其他三種尺寸 以 scss 方式撰寫如下 .material-icons{ &.md-18 { font-size: 18px; } &.md-36 { font-size: 36px; } &.md-40 { font-size: 40px; } &.md-48 { font-size: 48px; } } |
