material design icons

材質符號/材質圖標

這是來自 Google 的兩個不同的官方圖標集，使用相同的底層設計。 Material Symbols 是目前的一套，於 2022 年 4 月推出，基於可變字體技術。 Material Icons 是經典的集合，但不再更新。更多詳細資訊如下。

可以在 https://fonts.google.com/icons 上以更用戶友好的方式瀏覽圖示。使用左上角附近的下拉式選單在兩組之間進行選擇；材料符號是預設值。

圖標是根據材料設計指南設計的。

圖示請求

我們很樂意支援您的圖標需求！請在 GitHub 上將您的請求作為問題提交。

請注意，Google Fonts 不接受使用者提交的成品圖示設計！對於 Material 圖示有相當嚴格的指導方針，而且 Google 有產生此儲存庫的上游原始檔。因此，Google 不接受圖示檔案的拉取請求（無論是新圖示建議還是現有圖示修復）。概念受到讚賞——只是不要設計 SVG 並通過拉取請求提交它們。

然而，我們非常歡迎用戶指出外部文件或圖像作為他們想要的範例，但它們不會只是「按原樣」獲取。如果您有一個圖標的多個範例，這尤其有效，可以幫助我們理解該想法的「本質」。

例如，「性別」有一個相當通用的概念徽標/圖標，因此，如果您建議 Google 在 Material 樣式中添加性別圖標，請提及這一點，或指向 https://www.google.com/search ?q =agender+icon 將是一個有用的提示。

第三方標誌

目前，由於法律原因，Google 並未在 Material Symbols 或 Material Icons 中包含第三方徽標。過去包含的一些第三方徽標已被刪除。

npm 包

Google 目前不維護此儲存庫 v3（2016）之後的 npm 套件。但是，用戶@marella 正在託管以下內容。他告訴我們，這些內容是使用 GitHub Actions 自動更新和發布的。注意：Google不會監控或審查這些軟體包。

物質符號

• 僅適用於材質符號的 WOFF2 可變字體和 CSS
• 包括輪廓、圓形和尖銳圖標以及填充、重量、等級和光學尺寸的所有變化
• 支持 Sass

材料圖示

• 僅 WOFF2、WOFF 字型和 CSS
• 包括輪廓、圓形、銳利和雙色調圖標
• 支持 Sass

@material-design-icons/字體

• 僅 WOFF2 字型和 CSS
• material-icons包的輕量版
• 由於刪除了 WOFF (v1)，因此不支援 Internet Explorer 等舊版瀏覽器

@material-design-icons/svg

• 僅 SVG
• 使用 SVGO 優化 SVG

材料符號

這些較新的圖示可以在 https://fonts.google.com/icons 上以更用戶友好的方式瀏覽。使用左上角附近的下拉式選單在兩組之間進行選擇；材料符號是預設值。

這些圖示首先被建構/設計為可變字體（基於 Material Icons 的 24 px 設計）。共有三種單獨的材質符號可變字體，它們也有可用的靜態圖示（但它們不具有所有可用的變體，因為這將有數百種樣式）：

• 概述
• 圓形
• 鋒利的
• 請注意，雖然沒有單獨的填充字體，但填充軸允許存取所有三種字體的填充樣式。還可以對其進行操作以獲得動畫填充效果，以指示使用者選擇。

每種字體都有這些設計軸，這些設計軸在 CSS 或許多更現代的設計應用程式中可以有所不同：

• 光學尺寸 (opsz) 從 20 到 48 像素。預設值為 24。
• 粗細從 100（細）到 700（粗）。常規的是400。
• 等級從 -50 到 200。建議 -50 用於反轉對比度（例如黑色背景上的白色圖示）
• 填充範圍為 0 到 100。

此儲存庫中的以下目錄專門包含材質符號（不是材質圖示）內容：

• 符號
• 可變字體

材質符號中目前不提供哪些內容？

• 僅 20 和 24 px 版本採用完美的像素網格對齊設計
• 唯一的預製字體是可變字體
• 沒有雙色調圖標

材質圖示

可以透過 https://fonts.google.com/icons?icon.set=Material+Icons 以更用戶友好的方式瀏覽圖標

這些經典圖示有五種不同的風格：

• 概述
• Filled（字體版本稱為 Material Icons，因為這是最古老的樣式）
• 圓形
• 鋒利的
• 二音

此儲存庫中的以下目錄專門包含材質圖示（不是材質符號）內容：

• 安卓
• 字體
• IOS
• PNG
• 原始碼

Material Icons 目前不提供哪些功能？

• 可變字體
• 常規重量以外的重量
• 常規成績以外的成績
• 一種動​​畫填充過渡的方法
• 新圖示（自 2022 年停止更新以來）

材質圖標更新歷史

4.0.0 更新

• 2020年8月31日
• 重組儲存庫，更新資產。

3.0.1 更新

• 2016年9月1日
• 更改了 package.json 中的許可證。
• 新增了缺少的設備符號精靈。

3.0.0 更新

• 2016年8月25日
• 許可證更改為 Apache 2.0！

2.0

• 2016年5月28日

入門

閱讀開發人員指南，了解如何在專案中使用材料設計圖示。

使用字體

font和variablefont資料夾包含可以包含在專案中的預先產生的字體檔案。這對於網路來說尤其方便；但是，通常最好連結到 Google Fonts 上託管的網頁字體：

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

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

在 Google Fonts 開發人員指南中閱讀有關 Material Symbols 或 Material Icons 的更多資訊。

執照

我們已根據 Apache 授權版本 2.0 向您提供這些圖標，以便將其合併到您的產品中。請隨意在您的產品中重新混合和重新共享這些圖標和文件。我們希望在您的應用程式的「關於」畫面中顯示歸屬訊息，但這不是必需的。