Material 符號指南

什麼是質感設計符號？

Material 符號是我們最新的圖示，將超過 2,500 個字符整合為具有多種設計變化版本的單一字型檔案。符號有三種樣式，以及四個可調整的變數字型軸 (填滿、粗細、分級和光學大小)。請參閱 Material 符號程式庫中的整套 Material 符號。

FILL 軸

填滿功能可讓您修改預設的圖示樣式。一個圖示可以同時顯示未填滿和已填滿狀態。

如要傳送狀態轉場效果，請使用填滿軸的動畫或互動。預設值是 0，完全填入的值是 1。除了權重軸外，填滿也會影響圖示的外觀。

wght 軸

權重定義符號的筆劃粗細，使用細部 (100) 到粗體 (700) 之間的粗細範圍。權重也會影響符號的整體大小。

GRAD 軸

成績軸視覺化

體重和等級會影響符號的粗細。等級調整比權重調整更為精細，而且對符號大小的影響不大。

部分文字字型也支援成績。您可以在文字和符號之間比對成績等級，打造和諧的視覺效果。舉例來說，如果文字字型的成績值為 -25，則符號可以與適當的值 (例如 -25) 配對。

您可以根據不同需求使用成績：

低強調 (例如 -25 年級)：若要在深色背景中減少淺色符號的炫光，請使用低色調。

高強調 (例如 200 年級)：如要醒目顯示符號，請提高正分。

opsz 軸

光學大小範圍介於 20dp 到 48dp 之間。

如要讓圖片在不同大小呈現相同效果，則筆劃粗細 (粗細) 會隨著圖示大小縮放而變更。光學尺寸可在增加或減少符號大小時，自動調整筆劃粗細。

取得質感設計符號

Material 符號提供多種格式，適合各種類型的專案和平台，適用於應用程式的開發人員，以及模擬圖或原型設計中的設計人員。

授權

Material 符號適用於 Apache 授權 2.0 版。

瀏覽及下載個別圖示

完整的 Material 符號清單來自 SVG 或 PNG 格式的 Material 符號程式庫。適用於網頁、Android 和 iOS，或任何設計工具。

Git 存放區

git 存放區包含一組 SVG 格式的完整 Material 符號。

$ git clone https://github.com/google/material-design-icons

使用 Material 符號

用於網頁

Material 符號字型是將質感符號整合至網路專案最簡單的方式。

圖示會封裝為單一字型，讓網頁開發人員只需加入幾行程式碼，就能輕鬆整合這些圖示。

採用 Google Fonts 的靜態字型

如要設定任何網頁上要使用的圖示字型，最簡單的方法是透過 Google Fonts。加入這一行 HTML：

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

上述程式碼片段包含各軸的預設設定，其中 weight 為 400，weight 為 48，Grade 為 0，填入 (同樣為 0)

請使用 Fonts CSS API 設定不同的軸值。請參閱下列示例：

使用 Google Fonts 的可變字型

如要透過 CSS 建立圖示動畫，或想要更精細地控制圖示功能，請使用 Google 符號變數字型。使用範圍時，只要採用 number..number 格式，即可載入整個變數字型。請參閱「我能否使用可變字型支援」一文，瞭解使用者能否載入可變字型。例如：

甚至還能製作動畫！

自行託管字型

將圖示字型代管於您控管的位置，即可決定更新素材資源的時機。舉例來說，如果網址是 https://example.com/material-symbols.woff，請加入下列 CSS 規則：

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

如要正確轉譯字型，請宣告用來顯示圖示的 CSS 規則。這些規則通常可透過 Google Fonts API 樣式表提供，但在自我託管時，您必須在專案中手動加入：

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

在 HTML 中使用圖示

上述範例使用稱為連字的字體排版功能，只要使用其文字名稱即可轉譯圖示字符。網路瀏覽器會自動將文字段落替換成圖示向量，提供比對等數字字元參照更易讀的程式碼。例如，在 HTML 中您將使用 arrow_forward 代表圖示，而非 &#xE5C8;。如果是其他圖示，請使用圖示名稱的蛇形大小寫 (也就是將空格替換為底線)。

電腦和行動裝置上的大多數新式瀏覽器都支援此功能。請參閱「我可以使用連字支援」，瞭解使用者能否處理連體。

如果您需要支援不支援連字的瀏覽器，請使用數字字元參照 (即程式碼點) 指定圖示，如以下範例所示：

選取任何圖示並開啟圖示字型面板，即可在 Material 符號程式庫上找到圖示名稱和程式碼點。每個圖示字型在 Google Fonts git 存放區中都有一個碼點索引，顯示完整的名稱和字元碼組合。

Material Design 中的樣式圖示

這些圖示在設計方面符合質感設計指南，而且在使用建議的圖示大小和顏色時，能夠呈現最佳效果。下方的樣式可讓您輕鬆套用建議的大小、顏色和活動狀態。

在 Android 中使用

在 Material 符號程式庫中，所有圖示都是採用向量可繪項目格式。詳情請參閱 Android Vector Asset Studio 說明文件。

在 iOS 中使用

圖示也可為 Apple 符號格式。詳情請參閱 Apple 官方符號總覽和使用指南。

在 Flutter 中使用

已規劃對 Material 符號的 Flutter 支援。請密切留意最新消息。