マテリアル シンボルとは
マテリアル シンボルは最新のアイコンで、2,500 を超えるグリフが、さまざまなデザイン バリエーションを持つ単一のフォント ファイルに統合されています。記号には 3 つのスタイルがあり、調整可能な 4 つのフォント軸（塗りつぶし、太さ、グレード、光学サイズ）があります。マテリアル シンボルの一覧については、マテリアル シンボル ライブラリをご覧ください。
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
マテリアル シンボルを使用する
ウェブでの使用
マテリアル シンボル フォントは、マテリアル シンボルをウェブ プロジェクトに組み込む最も簡単な方法です。
アイコンは 1 つのフォントにパッケージ化されているため、ウェブ デベロッパーはわずか数行のコードでこれらのアイコンを簡単に組み込めます。
Google Fonts の静的フォント
ウェブページで使用するアイコン フォントをセットアップする最も簡単な方法は、Google Fonts です。次の 1 行の HTML を含めます。
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
上記のスニペットには、各軸のデフォルト構成が含まれています。weight は 400、光学サイズは 48、グレードは 0、fill は 0 です。
さまざまな軸の値を設定するには、Fonts CSS API を使用します。次の例をご覧ください。
Google Fonts の可変フォント
CSS を使用してアイコンをアニメーション化する場合や、アイコンの機能を細かく制御する場合は、Google Symbols の可変フォントを使用します。number..number の形式で範囲を使用すると、可変フォント全体を読み込むことができます。Can I Use の可変フォントのサポートを確認して、ユーザーが可変フォントを読み込めるかを確認します。以下に例を挙げます。
アニメーション化することも可能です。
フォントの自己ホスト
アセットを更新するタイミングを決定するために、管理する場所にアイコン フォントをホストします。たとえば、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 ligatures support を参照して、ユーザーが合法的処理を行えるかどうか（おそらくできる可能性）を確認してください。
合字をサポートしていないブラウザをサポートする必要がある場合は、次の例のように、数字参照（コードポイント）を使用してアイコンを指定します。
アイコンを選択してアイコン フォントパネルを開くと、Material Symbols ライブラリでアイコン名とコードポイントの両方を見つけることができます。各アイコン フォントには、名前と文字コードの完全なセットを示す Google Fonts Git リポジトリのコードポイント インデックスがあります。
マテリアル デザインのアイコンのスタイル設定
これらのアイコンはマテリアル デザイン ガイドラインに沿って設計されており、推奨されるアイコンのサイズと色を使用すると見栄えが良くなります。以下のスタイルを使用すると、推奨されるサイズ、色、アクティビティの状態を簡単に適用できます。
Android で使用
Material Symbols ライブラリでは、すべてのアイコンはベクター型ドローアブル形式です。詳しくは、Android Vector Asset Studio のドキュメントをご覧ください。
iOS で使用
アイコンは、Apple Symbols 形式でも提供されています。詳細については、Apple Symbols の公式の概要と使用ガイダンスをご覧ください。
Flutter で使用する
Flutter でマテリアル シンボルに対応する予定です。公開され次第お知らせいたします。