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

マテリアルシンボルガイド

マテリアルシンボルとは

マテリアルシンボルは最新のアイコンであり、2,500 以上のグリフを 1 つのフォントファイルに統合し、さまざまなデザインバリアントを用意しています。記号には 3 つのスタイルと 4 つの調整可能な可変フォント軸（塗りつぶし、重量、グレード、光学サイズ）が用意されています。マテリアルシンボルの完全なセットについては、マテリアルシンボルライブラリをご覧ください。

`FILL` 軸

Fill では、デフォルトのアイコンスタイルを変更できます。1 つのアイコンで、塗りつぶし状態と塗りつぶし状態の両方をレンダリングできます。

状態遷移を伝えるには、アニメーションまたは操作に塗りつぶし軸を使用します。デフォルト値は 0、完全に入力されている場合は 1 です。太さの線とともに、塗りつぶしもアイコンの外観に影響します。

`wght` 軸

ウェイトは、シンボルのストロークの太さを定義します。ウェイトは細い（100）から太字（700）の範囲です。重みはシンボルの全体的なサイズにも影響します。

`GRAD` 軸

成績軸の視覚化

重量とグレードは記号の太さに影響します。勾配の調整は、重みの調整よりも細かくなり、シンボルのサイズにわずかな影響があります。

グレードは一部のテキストフォントでも利用できます。テキストと記号のグレードレベルを一致させることで、調和のとれた視覚効果を実現できます。たとえば、テキストのフォントのグレード値が -25 の場合、記号は適切な値（-25 など）と一致させることができます。

成績はさまざまな用途に使用できます。

低度を強調する（例: -25 グレード）: 暗い背景で明るい記号のグレアを軽減するには、低グレードを使用します。

高強調（例: 200 グレード）: 記号をハイライト表示するには、正のグレードを増やします。

`opsz` 軸

光学サイズの範囲は 20 dp から 48 dp です。

画像がさまざまなサイズで同じように表示されるようにするには、アイコンのサイズが拡大されるときに、ストロークの太さ（太さ）が変化するようにします。光学サイズにより、記号のサイズを増減するときにストロークの太さを自動的に調整できます。

マテリアルシンボルの取得

マテリアルシンボルは複数の形式で使用でき、さまざまなタイプのプロジェクトやプラットフォーム（アプリの開発者、モックアップやプロトタイプのデザイナーなど）に適しています。

ライセンス

マテリアルシンボルは、Apache License バージョン 2.0 に含まれています。

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

マテリアルシンボルの完全なセットは、マテリアルシンボルライブラリから SVG または PNG 形式で入手できます。ウェブ、Android、iOS のデザイナーツールに適しています。

Git リポジトリ

git リポジトリには、SVG 形式のマテリアルシンボルセット一式が含まれています。

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

マテリアルシンボルの使用

ウェブで使用

マテリアルシンボルフォントは、ウェブプロジェクトにマテリアルシンボルを組み込む最も簡単な方法です。

アイコンは単一のフォントにパッケージ化されているため、ウェブデベロッパーはわずか数行のコードでこれらのアイコンを簡単に取り込むことができます。

Google Fonts の静的フォント

Google Fonts を使用すると、どのウェブページでも使用するアイコンフォントを簡単に設定できます。次の 1 行の HTML を含めます。

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

上記のスニペットには、各軸のデフォルト構成（重み 400、光学サイズ 48、グレード 0、塗りつぶし（0 も））が含まれます。

さまざまな軸の値を構成するには、Fonts CSS API を使用します。以下の例をご覧ください。

Google Fonts の可変フォント

CSS を使用してアイコンをアニメーション化する場合や、アイコン機能を細かく制御する場合は、Google シンボルの変数フォントを使用します。number..number 形式の範囲を使用して、変数フォント全体を読み込むことができます。ユーザーが変数フォントを読み込むことができるかどうかを確認するには、Can I Use of Variable Fonts support をご覧ください。次に例を示します。

アニメーション化することも可能です。

フォントのセルフホスティング

アセットを更新するタイミングを決定するために、管理する場所にアイコンフォントをホストします。たとえば、URL が 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 を使用します。

この機能は、パソコンとモバイルデバイスのどちらの最新のブラウザでもサポートされています。ユーザーがリガチャーを処理できるかどうかを確認するには、Can I Use's ligtures support をご覧ください。

リガチャーをサポートしていないブラウザをサポートする必要がある場合は、次の例に示すように、数字文字参照（コードポイント）を使用してアイコンを指定します。

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

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

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

Android で使用する

マテリアルシンボルライブラリでは、すべてのアイコンがベクター型ドローアブル形式になっています。詳しくは、Android Vector Asset Studio のドキュメントをご覧ください。

iOS で使用する

アイコンは Apple シンボル形式でも使用できます。詳細については、Apple Symbols の公式概要と使用ガイダンスをご覧ください。

Flutter で使用

マテリアルシンボルの Flutter サポートが計画されています。公開され次第お知らせいたします。