このページは Cloud Translation API によって翻訳されました。

マテリアルアイコンガイド

マテリアルアイコンの概要 - その取得場所、プロジェクトへの統合方法。

マテリアルアイコンとは

マテリアルデザインのシステムアイコンは、シンプル、モダンで、フレンドリーで、時には一風変わったものです。各アイコンは、UI 全体で一般的に使用される一般的なコンセプトをシンプルかつ最小限の形式で表現するためのデザインガイドラインに従って作成されています。これらのアイコンは、大小両方のサイズで読みやすさと鮮明さを確保するため、すべての一般的なプラットフォームとディスプレイ解像度で美しい表示になるように最適化されています。

マテリアルデザインアイコンの一覧については、マテリアルアイコンライブラリをご覧ください。

アイコンを取得する

アイコンにはいくつかの形式が用意されており、さまざまなタイプのプロジェクトやプラットフォーム、デベロッパーのアプリ、モックアップやプロトタイプで使用するデザイナーに適しています。

ライセンス

これらのアイコンは、Apache License バージョン 2.0 の製品に組み込むことができます。これらのアイコンやドキュメントは、ご自分のプロダクトで自由にリミックスしたり、共有したりできます。アプリの [概要]about 画面にアトリビューションを表示することをおすすめしますが、必須ではありません。

個々のアイコンの閲覧とダウンロード

マテリアルアイコンの完全なセットは、マテリアルアイコンのライブラリから入手できます。アイコンは、ウェブ、Android、iOS プロジェクトに適した形式、またはデザイナーツールに組み込むのに適した形式の SVG または PNG でダウンロードできます。

すべてをダウンロードしています

すべてのアイコンが収録されている最新の Stable 版の zip アーカイブ（最大 310 MB）またはマスター版を入手します。

Git リポジトリ

マテリアルアイコンは、Git リポジトリから入手できます。Git リポジトリには、使用可能なすべての形式を含む、アイコンの完全なセットが含まれています。

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

ウェブ用のアイコンのフォント

マテリアルアイコンのフォントは、マテリアルアイコンをウェブプロジェクトに組み込む最も簡単な方法です。すべてのマテリアルアイコンを 1 つのフォントにパッケージ化し、最新のブラウザのタイポグラフィレンダリング機能を活用しています。これにより、ウェブデベロッパーはわずか数行のコードでこれらのアイコンを簡単に組み込めます。

フォントの使用は最も便利な方法であるだけでなく、効率的で見栄えが良い方法です。

1 つの小さなファイルから 900 以上のアイコンすべてを利用可能。
Google ウェブフォントサーバーから配信するか、自社でホストできます。
最新のすべてのウェブブラウザでサポートされています。
色付け、サイズ設定、配置はすべて CSS で行います。
ベクターベース: あらゆるスケールで鮮明に再現します。Retina ディスプレイ、低 dpi のディスプレイ画面に対応しています。

アイコンフォントの容量は、最小の woff2 形式では 42 KB、標準の woff 形式では 56 KB です。これに対し、gzip で圧縮された SVG ファイルのサイズは、通常約 62 KB ですが、必要なアイコンのみをシンボルスプライトを含む 1 つの SVG ファイルにコンパイルすることで、サイズを大幅に削減できます。

設定方法 1. Google Fonts 経由で使用

ウェブページで使用するアイコンフォントをセットアップする最も簡単な方法は、Google Fonts です。必要な作業は、HTML を 1 行記述することだけです。

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

他の Google ウェブフォントと同様に、適切な CSS が提供されると、ブラウザに固有の「マテリアルアイコン」フォントが有効になります。.material-icons という CSS クラスを追加で宣言します。このクラスを使用するすべての要素には、ウェブフォントからこれらのアイコンをレンダリングするための適切な 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 でのアイコンの使用

ウェブページにアイコンを組み込むのは簡単です。次の例をご覧ください。

顔

face

この例では、合字というタイポグラフィ機能を使用しています。これにより、テキストの名前だけでアイコンのグリフをレンダリングできます。置換はウェブブラウザによって自動的に行われ、同等の数字参照よりも読みやすいコードを提供します。

この機能は、パソコンとモバイルデバイスの両方の最新のブラウザでサポートされています。

参照者	合字をサポートするバージョン
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Microsoft Edge	18
オペラ	15
Apple MobileSafari	iOS 4.2
Android ブラウザ	3.0

合字をサポートしていないブラウザでは、代わりに、以下の例のように数字参照を使用してアイコンを指定します。

標準



アイコンを選択してアイコンフォントパネルを開くと、マテリアルアイコンライブラリでアイコン名とコードポイントの両方を確認できます。各アイコンフォントには Git リポジトリにコードポイントインデックスがあり、名前と文字コードの完全なセットを確認できます（こちら）。

マテリアルデザインのスタイルアイコン

これらのアイコンはマテリアルデザインガイドラインに基づいて設計されており、推奨されるアイコンのサイズと色を使用すると最も見栄えが良くなります。以下のスタイルを使用すると、推奨されるサイズ、色、アクティビティの状態を簡単に適用できます。

/* 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); }

サイズ調整

フォント内のアイコンは任意のサイズに変更できますが、マテリアルデザインのアイコンのガイドラインに沿って、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; }

マテリアルアイコンは 24 ピクセルが最適ですが、アイコンを別のサイズで表示する必要がある場合は、上記の CSS ルールを使用すると便利です。

18px

face

24px

face

36px

face

48px

face

塗り絵

アイコンフォントを使用すると、あらゆる色のアイコンのスタイルを簡単に設定できます。マテリアルデザインのアイコンのガイドラインに沿って、アクティブなアイコンを明るい色の背景と暗い背景で使用するときは、黒（不透明度 54%）または白（不透明度 100%）を使用することをおすすめします。アイコンが無効または無効な場合、明るい背景と暗い背景にはそれぞれ黒（26%）または白（30%）を使用します。

上記のマテリアルの 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); }

明るい背景に暗い前景の色にアイコンを描画する例:

標準

face

無効

face

暗い背景に明るい前景色を使用してアイコンを描画する例:

標準

face

無効

face

アイコンのカスタム色を設定するには、フォントに使用する色を指定する CSS ルールを定義します。

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

アイコンを参照するときにクラスを使用します。

標準

face

ウェブのアイコン画像

マテリアルアイコンは通常の画像としても提供されています（PNG 形式と SVG 形式の両方）。

SVG

マテリアルアイコンは、ウェブプロジェクトに適した SVG として提供されます。各アイコンはマテリアルアイコンライブラリからダウンロードできます。SVG は、以下のパスの下にあるマテリアルデザインアイコンの git リポジトリからも入手できます。

material-design-icons/src/

たとえば、マップのアイコンは src/maps にあります。

material-design-icons/src/maps/

ウェブサイトで複数のアイコンを使用している場合は、画像からスプライトシートを作成することをおすすめします。詳しくは、Git リポジトリの sprites ディレクトリのドキュメントをご覧ください。

PNG

PNG は、ウェブ上でアイコンを表示するための最も伝統的な方法です。マテリアルアイコンライブラリからダウンロードしたアイコンでは、各アイコンの密度が 1 倍と 2 倍になりました。ダウンロードでは、それぞれ 1x、2x と呼ばれます。アイコンは、以下の Git リポジトリからも利用できます。

material-design-icons/png/

ウェブサイトで複数のアイコンを使用している場合は、画像からスプライトシートを作成することをおすすめします。詳しくは、Git リポジトリの sprites ディレクトリにある推奨事項をご覧ください。

Android のアイコン

Android に適した PNG はマテリアルアイコンのライブラリから入手できます。画面密度はすべてサポートされているため、どのデバイスでも適切に表示されます。

マテリアルデザインアイコンの Git リポジトリからも、同じ色とサイズの組み合わせ（下記を参照）で入手できます。

ベクター型ドローアブルは現在、黒の 24 dp アイコンとしてのみ利用可能です。これは、ほとんどの標準的なアイコンサイズとの互換性を維持するためです。アイコンを別の色でレンダリングするには、Android Lollipop で利用可能なドローアブルの色合い調整を使用します。

ベクター型ドローアブルを使用する場合は、xxxhdpi 密度 PNG を含める必要はない場合があります。その画面密度をサポートするデバイスは、ベクター型ドローアブルをサポートしていない可能性はまずないからです。

iOS 用のアイコン

マテリアルアイコンは iOS アプリ内でも適切に機能します。マテリアルアイコンライブラリと Git リポジトリでは、これらのアイコンが Xcode イメージセットにパッケージ化されており、Xcode Asset Catalogs（xcassets）と簡単に連携できます。これらのイメージセットは、Xcode アセットカタログにアセットカタログにドラッグするか、フォルダを xcasset フォルダにコピーすることで、任意の Xcode アセットカタログに追加できます。

iOS イメージセット

イメージセットには、単一密度、2 倍、3 倍の密度の画像（1x、2x、3x）が含まれているため、既知のすべての iOS 画面密度で動作します。黒と白の両方のアイコンが用意されていますが、UIImage の imageWithRenderingMode と UIImageRenderingModeAlwaysTemplate を併用することをおすすめします。これにより、画像を任意の色に着色できるアルファマスクとして使用できます。

Objective-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 言語専用のアセットを提供するには、リソースディレクトリで ldrtl 修飾子（res/drawable-ldrtl/ など）を使用します。このようなディレクトリ内のリソースは、RTL 言語にのみ使用されます。Android API 19 以降を搭載するデバイスの場合、フレームワークにはドローアブル用の autoMirrored 属性も用意されています。この属性を true に設定すると、ドローアブルは RTL 言語で自動的にミラーリングされます。

autoMirrored を使用する場合:

<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>

autoMirrored を使用するか、代替のドローアブルリソースを指定できない場合は、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 の設定を使用して、ビューの validLayoutDirection を決定します。この effectiveLayoutDirection は、画像が表示されるときに画像をミラーリングするかどうかを決定します。

デフォルトでは、画像のセマンティックコンテンツは unspecified に設定されています。これにより、RTL モードでミラーリングされます。アイコンを一切ミラーリングしない場合は、明示的に forceLeftToRight に設定する必要があります。Apple は、メディアの再生（早送り、巻き戻しなど）、音符、時間の経過を示す画像など、ミラーリングすべきではない例外をいくつか呼び出しています。

Objective-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）	右矢印
右矢印（iOS）	左矢印	右矢印
件の課題	課題の返却（）	Backspace
のバッテリー残量が不明です	件の通話	通話の統合
件の不在着信	件の不在着信	件の通話の着信
通話の分割	残り山形	山形（右）
Chrome リーダーモード	不明なデバイス: 台	DVR
件の予定メモ	件の注目の再生リスト	の注目動画
ページ目	のフライトの着地	の離陸
形式のインデントを減らします	形式のインデントを増やします	形式リストの箇条書き
転送済み	関数	の入力
個のキーボードタブ	個のラベル	ラベルが重要
ラベルの概要	最後のページ:	の起動
個のリスト	のリアルタイムヘルプ	のモバイル画面共有
の複数折れ線グラフ	前に移動	が次に移動
来週の	件のメモ	が新しいウィンドウで開きます
件の再生リストへの追加	の音楽をキューに追加	やり直し回
件の返信	さんが全員に返信	の画面共有
の送信	短いテキスト	のグラフの表示
の並べ替え	つ星（半分）	個のテーマ
は横ばい傾向	目次	は下降傾向です
が上昇中	元に戻す	件のビューリスト
: キルトを表示	でテキストを折り返す

マテリアル アイコンガイド

マテリアル アイコンとは

アイコンを取得する

ライセンス

個々のアイコンの閲覧とダウンロード

すべてをダウンロードしています

Git リポジトリ

ウェブ用のアイコンのフォント

設定方法 1. Google Fonts 経由で使用

設定方法 2. セルフ ホスティング

HTML でのアイコンの使用

マテリアル デザインのスタイル アイコン

サイズ調整

塗り絵

ウェブのアイコン画像

SVG

PNG

Android のアイコン

iOS 用のアイコン

RTL のアイコン

Android の RTL アイコン

iOS の RTL アイコン

ウェブ上の RTL アイコン

ImageMagick を使用して独自の RTL アイコンを生成する

RTL 用にミラーリングする必要があるアイコンはどれですか？

マテリアルアイコンガイド

マテリアルアイコンとは

設定方法 2. セルフホスティング

マテリアルデザインのスタイルアイコン