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

マテリアル シンボルとは

マテリアル シンボルは最新のアイコンで、さまざまなデザイン バリアントを持つ 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 の場合は、&#xE5C8; ではなく、arrow_forward でアイコンを表します。他のアイコンについては、アイコン名のスネークケースを使用します(スペースをアンダースコアに置き換えます)。

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

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

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

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

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

Android で使用

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

iOS で使用

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

Flutter で使用

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