マテリアル シンボルとは
マテリアル シンボルは最新のアイコンであり、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 サポートが計画されています。公開され次第お知らせいたします。