材料圖示指南

Material Design 圖示總覽，說明圖示的取得位置以及與您的專案整合的方法。

什麼是質感設計圖示？

Material Design 系統圖示相當簡潔、新穎、親切，甚至偶爾出現新奇的情況。每個圖示都是根據我們的設計指南建立，以簡單明瞭的方式描繪出 UI 中常用的通用概念。為確保不論大小，都能清楚顯示，這些圖示已經過最佳化，可在所有常見平台及螢幕解析度上顯示美觀的畫面。

請查看 Material Design 圖示資料庫的完整 Material Design 圖示組合。

圖示資料庫

取得圖示

圖示有多種格式，適用於不同類型的專案和平台、應用程式的開發人員，以及模擬圖或原型中的設計人員。

授權

我們已依據 Apache 授權 2.0 版提供這些圖示，方便您將這些圖示整合至您的產品中。如有需要，歡迎您在產品中重混或重新分享這些圖示和說明文件。我們希望在應用程式「關於」about畫面中使用歸因功能，但這並非必要步驟。

瀏覽及下載個別圖示

您可前往 Material Design 圖示資料庫查看完整的 Material Design 圖示組合。您可以下載 SVG 或 PNG 等圖示，格式適合網頁、Android 和 iOS 專案，或加入任何設計工具中。

正在下載所有內容

取得所有圖示的最新的穩定 ZIP 封存檔 (約 310 MB)，或是主節點的出血版本。

Git 存放區

您可以在 git 存放區取得質感設計圖示，此存放區內含完整的圖示組合，包括我們目前提供的所有格式。

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

網路的圖示字型

使用質感設計圖示字型是將質感設計圖示與網路專案整合最簡單的方式。我們已將所有質感設計圖示封裝為單一字型，並運用新型瀏覽器的字體排版轉譯功能，讓網頁程式開發人員只需加入幾行程式碼，就能輕鬆整合這些圖示。

使用字型不僅是最便利的方法，還很有效率且外觀很棒：

  • 在單一小型檔案內載入超過 900 個圖示。
  • 可從 Google 網路字型伺服器提供，也可以自行代管。
  • 支援所有新式網路瀏覽器。
  • 利用 CSS 全彩、大小和定位。
  • 向量式：無論在任何尺寸、Retina 螢幕和低 dpi 顯示螢幕上，畫面都能完美呈現。

圖示字型的最小格數為 42 KB，並採用最小的 woff2 格式和 56KB 標準差旅數格式。相較之下，使用 gzip 壓縮的 SVG 檔案一般大小通常約為 62 KB，但只要僅將所需圖示編譯為含有符號合併字元的單一 SVG 檔案，就能大幅減少大小。

設定方法 1. 透過 Google Fonts 使用

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

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

與其他 Google Web Fonts 類似，我們會提供正確的 CSS，以啟用瀏覽器專屬的「Material Design 圖示」字型。額外的 CSS 類別會宣告為 .material-icons。使用此類別的任何元素都會有正確的 CSS，以便從網路字型顯示這些圖示。

設定方法 2：自行託管

如果想要自行管理網路字型，則必須進行一些額外設定。在位置代管圖示字型 (例如 https://example.com/material-icons.woff)，然後新增下列 CSS 規則：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

此外，轉譯圖示的 CSS 規則也必須宣告，才能正確顯示字型。這些規則通常會做為 Google 網路字型樣式表的一部分提供，但您必須在自行管理字型時手動納入專案中：

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在 HTML 中使用圖示

將圖示加入網頁中並不容易。以下舉個小例子：

人臉

<span class="material-icons">face</span>

這個範例使用稱為「連字」的字體排版功能，可讓您透過文字名稱來呈現圖示字符。瀏覽器會自動進行取代，而且提供的程式碼比同等數字參照更為可讀。

電腦和行動裝置上的大多數新式瀏覽器都支援這項功能。

瀏覽者 支援連字版本的版本
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
Opera 15
Apple 行動版 Safari iOS 4.2 版
Android 瀏覽器 3.0

如果瀏覽器不支援連字鍵，改回使用數字字元參照來指定圖示，如以下範例所示：

正常
<span class="material-icons">&#xE87C;</span>

選取任何圖示並開啟圖示字型面板，即可在 Material Design 圖示資料庫上找到圖示名稱和程式碼點。各個圖示字型在 Git 存放區中都有一個程式碼點索引，顯示完整的名稱與字元代碼 (這裡)。

在 Material Design 中設定圖示的樣式

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

尺寸

雖然字型中的圖示可以縮放至任何尺寸，但根據 Material Design 圖示規範的規定，我們建議採用 18、24、36 或 48 像素的圖片顯示。預設值為 24px。

標準材質設計大小指南的 CSS 規則：

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Material 圖示在 24 像素上呈現效果最佳，但如果需要以不同尺寸顯示圖示，請使用上述 CSS 規則：

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36px
<span class="material-icons md-36">face</span>
48px
<span class="material-icons md-48">face</span>

著色

使用圖示字型可以輕鬆設定任何顏色的圖示樣式。根據 Material Design 圖示指南，在淺色或深色背景上顯示這類圖示時，建議分別使用不透明度 54% 的黑色或白色，高度為 100%。如果圖示停用或無效，背景比例需為 26% 或白色，背景為 30%，代表淺色和深色背景。

以下為使用上述 Material CSS 樣式的一些範例：

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

範例：在淺色背景中使用深色前景繪製圖示：

正常
<span class="material-icons md-dark">face</span>
已停用
<span class="material-icons md-dark md-inactive">face</span>

範例：在淺色前景顏色的深色背景中繪製圖示：

正常
<span class="material-icons md-light">face</span>
已停用
<span class="material-icons md-light md-inactive">face</span>

如要設定自訂圖示顏色，請定義 CSS 規則，指定字型要使用的顏色：

.material-icons.orange600 { color: #FB8C00; }

然後在參照圖示時使用類別：

正常
<span class="material-icons orange600">face</span>

網路圖示圖片

Material Design 圖示也適用於 PNG 和 SVG 格式的一般圖片。

SVG

Material Design 圖示是以 SVG 的形式提供，適合網路專案使用。您可以從 Material Design 圖示資料庫下載個別圖示。您也可以在路徑下方的質感設計圖示 git 存放區中找到 SVG：

material-design-icons/src/

舉例來說，地圖圖示位於 src/maps：

material-design-icons/src/maps/

如果網站上使用多個圖示，建議您從圖片中建立 Sprite 工作表。詳情請參閱 Git 存放區的 Sprites 目錄中的說明文件。

PNG

PNG 是在網路上顯示圖示的傳統方法。從 Material Design 圖示庫提供的下載項目，每個圖示都能提供單雙密度和雙倍密度。在下載內容中，這兩個項目分別稱為 1x 和 2x。您也可以在下方的 Git 存放區中找到圖示：

material-design-icons/png/

如果網站上使用多個圖示，建議您從圖片中建立 Sprite 工作表。詳情請參閱 git 存放區中的 Sprites 目錄中的建議。

Android 圖示

您可以在 Material Design 圖示程式庫中找到適合 Android 的 PNG 檔案。這些圖片適用於所有支援的螢幕密度，因此在任何裝置上都能正常顯示。

圖示也可在 Material Design 圖示 Git 存放區中使用，顏色與大小的組合相同，如下所示：

「向量可繪項目」目前只支援黑色的 24dp 圖示。這是為了與大部分標準圖示大小相容。如要以不同顏色轉譯圖示，請使用 Android Lollipop 可用的可繪項目色調。

使用向量可繪項目時，可能不必加入 xxxhdpi 像素密度 PNG，因為支援該螢幕密度的裝置可能不支援向量可繪項目。

iOS 圖示

Material Design 圖示也適用於 iOS 應用程式。在 Material Design 圖示程式庫和 git 存放區中，這些圖示會封裝在 Xcode imagesets 中，以便搭配 Xcode 資產目錄 (xcassets) 運作。如要將這些圖片集新增至任何 Xcode 資產目錄，請將圖片集拖曳至資產目錄的 Xcode，或是將資料夾複製到 xcasset 資料夾。

iOS 圖片集

圖片集包含單張、雙倍和三倍密度 (1x、2x、3x) 的圖片，因此可在所有已知的 iOS 螢幕密度上運作。提供黑白圖示，但我們建議將 UIImage 的 imageWithRenderingMode 與 UIImageRenderingModeAlwaysTemplate 搭配使用，讓圖片可用做可以改變任何色彩的 Alpha 遮罩。

目標 C 範例：

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Swift 範例：

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

RTL 中的圖示

如阿拉伯文和希伯來文等語言是由右至左 (RTL) 書寫，如為 RTL 語言，UI 必須雙向同步，才能以 RTL 顯示大部分的元素。當使用者介面針對 RTL 設定鏡像時，部分圖示也應套用鏡像翻轉。當文字、版面配置和圖像顯示鏡像翻轉方向為支援從右到左的 UI 時，與時間相關的任何內容都應以從右到左的方式呈現。舉例來說，向前指向左側，向前指向右側。不過請注意，圖示位置也會影響圖示是否應套用鏡像。

在 RTL 模式中，圖示的方向與其他 UI 元素相符時，才能鏡像顯示圖示。如果圖示代表網站的圖像特徵在 RTL 語言不同，則該圖示也應以 RTL 方向顯示。舉例來說，如果編號清單中的數字位於 RTL 語言右側，那麼數字應該會顯示在鏡像圖示的右側。

Android 上的 RTL 圖示

這篇 Android 開發人員文章說明如何實作 RTL 使用者介面。根據預設，Android 裝置會在版面配置方向鏡像顯示圖示時，不會鏡像鏡像翻轉。你必須提供適用於 RTL 語言的特殊素材資源，或是使用架構功能來鏡像素材資源，在需要時特別呈現適當圖示。

如要提供 RTL 語言的特殊素材資源，您可以在資源目錄 (例如 res/drawable-ldrtl/) 上使用 ldrtl 限定詞。這類目錄中的資源只會用於 RTL 語言。如果是搭載 Android API 19 以上版本的裝置，此架構也會為 Drawables 提供 autoMirrored 屬性。這項屬性設為 true 時，可繪項目會自動鏡像到 RTL 語言。

使用自動鏡像：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

如果無法使用自動鏡像或提供替代可繪項目資源，ImageView scaleX 屬性也可以用來鏡像可繪項目 (例如在 res/layout-ldrtl 目錄中提供 RTL 專屬版面配置)。

在版面配置檔案中進行鏡像作業：

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

最後，可繪項目可透過程式輔助方式鏡像。

使用 getLayoutDirection 手動檢查版面配置方向：

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

以程式輔助方式鏡像 ImageView 內容：

imageView.setScaleX(-1);

iOS 上的 RTL 圖示

iOS 有附加至每個檢視畫面的 UISemanticContentAttribute 概念。可以是 unspecified、forceLeftToRight、forceRightToLeft、playback 或 spatial。iOS 會使用這個值，以及裝置顯示介面的從左到右 (LTR)/RTL 設定，決定檢視畫面的 performanceLayoutDirection。這個 EffectiveLayoutDirection 可決定圖片顯示時是否要鏡像投射。

根據預設，圖片的語意內容會設為 unspecified。如此一來，系統就會在 RTL 模式中雙向同步這些圖片。如果不想讓系統雙向套用圖示，則必須將其明確設為 forceLeftToRight。Apple 會呼叫一些不應鏡像的例外狀況，例如播放媒體 (快轉、倒轉等)、音符、指示時間段的圖片等。

目標 C 範例：

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Swift 範例：

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

如要進一步瞭解如何在 iOS 和 macOS 中實作 RTL，請參閱 Apple 的 RTL 說明文件。

已在 iOS 9 中新增語意內容。如果您支援舊版 iOS，實質關聯國際化架構可將部分功能向後移植至 iOS 8。

網路上的 RTL 圖示

建議你先參閱以下文章，瞭解如何使用網頁版 RTL：https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

根據預設，網頁在版面配置方向套用鏡像時，圖示不會鏡像翻轉。您必須視需要特別鏡像適當的圖示。

以下範例說明如何實作簡單的 RTL CSS 規則。你也可以在 Codepen 上查看。

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

使用 ImageMagick 產生專屬 RTL 圖示

如果無法在程式碼中建立圖示鏡像，您可以使用 ImageMagick 水平鏡像圖片。

convert -flop my_icon.png my_icon_rtl.png

RTL 應鏡射哪些圖示？

以下是可以透過程式輔助方式，鏡像為 RTL 的圖示清單：
返回箭頭 箭頭返回 iOS 向前箭頭
向前 箭頭 向左箭頭 向右箭頭
項作業 作業發還 的 Backspace 鍵
電量不明： 已撥打 通電話 通話合併
通未接來電 通未接來電 已接到 通來電
通話分割 還有 箭號 箭號向右
Chrome 閱讀器模式 部裝置不明 DVD
則事件附註 「」精選播放清單 「」精選影片
第一頁 的航班降落 班機起飛
減少格式縮排 增加 個格式縮排 「」格式清單項目符號
向前 個函式 輸入
鍵盤分頁 個標籤 個標籤重要
「」標籤大綱 最後一頁 啟動
清單 「」即時說明 人行動裝置分享螢幕畫面
多線圖 在之前瀏覽 瀏覽下一個
下週 則記事 已在新視窗中開啟「」
新增「」播放清單 待播清單音樂 重做
則回覆 則回覆全部 分享螢幕畫面
傳送 個簡短文字 顯示圖表
排序 顆星 個主旨
持平趨勢 目錄 個趨勢下降
上升 復原 查看清單
傾斜 個檢視 自動換行