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

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

マテリアルシンボルとは

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

`FILL` 軸

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

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

`wght` 軸

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

`GRAD` 軸

グレード軸の可視化

重量とグレードは記号の太さに影響します。グレードの調整は、重みの調整よりも詳細であるため、シンボルのサイズに少し影響します。

グレードは一部のテキストフォントでも選択可能です。テキストと記号のグレードを一致させると、調和のとれた視覚効果が得られます。たとえば、テキストフォントのグレード値が -25 の場合、シンボルは適切な値（-25 など）と一致します。

成績はさまざまなニーズに使用できます。

低強調（例: -25 グレード）: 暗い背景に明るいマークが映っている場合、反射を低減するにはグレードを下げます。

高強調（例: 200 グレード）: シンボルをハイライト表示するには、正のグレードを上げます。

`opsz` 軸

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

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

マテリアル記号を取得する

マテリアルシンボルは複数の形式で提供され、さまざまな種類のプロジェクトとプラットフォーム（アプリを利用するデベロッパー、モックアップやプロトタイプを作成するデザイナー）に適しています。

ライセンス

マテリアルシンボルは、Apache ライセンスバージョン 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" />

上記のスニペットには、各軸のデフォルト構成が含まれています。weight は 400、optical size は 48、grade は 0、fill（0 も）です。

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

Google Fonts による可変フォント

CSS を使用してアイコンをアニメーション化する場合や、アイコン機能を細かく制御する場合は、Google 記号の可変フォントを使用します。範囲（number..number 形式）を使用して、可変フォント全体を読み込むことができます。ユーザーが可変フォントを読み込むことができるかどうかについては、可変フォントのサポート（英語）をご覧ください。たとえば次のようなものがあります。

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

フォントの自己ホスティング

アセットをアップデートするタイミングを決めるために、お客様が制御するロケーションにアイコンフォントをホストします。たとえば、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 でのアイコンの使用

上の例では、ligatures というタイポグラフィ機能を使用しています。これにより、テキスト名だけでアイコングリフをレンダリングできます。ウェブブラウザは、テキストリーガルをアイコンベクターに自動的に置き換え、同等の数値参照よりも読みやすいコードを提供します。たとえば、HTML の場合は、 ではなく、arrow_forward でアイコンを表します。他のアイコンについては、アイコン名のスネークケースを使用します（スペースをアンダースコアに置き換えます）。

この機能は、パソコンとモバイルデバイスの両方のほとんどの最新のブラウザでサポートされています。ユーザーが結束の処理を行うことができるかどうかについては、Can I Use’s ligatures support をご覧ください。

合法的でないブラウザをサポートする必要がある場合は、以下の例のように数値参照（コードポイント）を使用してアイコンを指定します。

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

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

これらのアイコンはマテリアルデザインガイドラインを遵守するように設計されており、推奨されるアイコンのサイズと色を使用すると最もわかりやすく表示されます。以下のスタイルを使用すると、推奨されるサイズ、色、アクティビティの状態を簡単に適用できます。

Android で使用

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

iOS で使用

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

Flutter で使用

Flutter でマテリアルシンボルをサポートする予定です。公開され次第お知らせいたします。