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

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

マテリアルシンボルとは何ですか？

マテリアルシンボルは、2,500 を超えるグリフを 1 つのフォントファイルに統合した最新のアイコンで、幅広いデザインのバリエーションがあります。シンボルは以下で利用できます: 3 つのスタイルと 4 つの調整可能な可変フォント軸（塗りつぶし、太さ、評価、。マテリアルシンボルの完全なセットについては、マテリアルシンボルをご覧ください。 Library にあります。

`FILL` 軸

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

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

`wght` 軸

Weight はシンボルのストロークの太さを定義します。太さの範囲は細い（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" />

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

フォント CSS を使用する API から異なる軸値を構成します。次の例をご覧ください。

Google Fonts の可変フォント

CSS でアイコンをアニメーション化する場合や、アイコン機能を細かく制御する場合は、 Google Symbols の可変フォントです。number..number 形式の範囲を使用する。可変フォント全体を読み込めますCan I Use's Variable Fonts をサポート可変フォントの読み込みが可能かどうかを確認します判断できます次に例を示します。

アニメーション化することもできます。

アイコンのフォントを最適化する

&icon_names クエリパラメータを使用して、フォントのサブセットを作成して、アプリに関連するアイコンのみを含めます。アイコン名（合字）をアルファベット順に並べ替えたカンマ区切りのリストを指定します。

非推奨 - デフォルトを使用する設定では 3,800 以上のアイコンがすべて読み込まれます。フォントペイロード: 295 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
推奨 - アイコン名を指定して、必要なアイコンのみを読み込みます。フォントペイロード: 1.7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
可変フォント軸をインスタンス化して、アプリケーションで使用する軸のみを含めます。ほとんどのアプリケーションでは、軸のバリエーションをいくつか用意するだけで済みます。

非推奨 - 軸の設定がない場合、デフォルトの静的フォント（太さ 400、光学サイズ 24、丸め 50、グレード 0、塗りつぶし 0）通常、すべての可変フォント軸をすべて含める必要はなく、ペイロードが増加します。フォントペイロード: 7.9 MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
推奨 - 特定の軸の組み合わせが使用されます。たとえば、[FILL] 軸全体は状態間の CSS 遷移を提供し、[ROND] 100 が選択されたデザインです。フォントペイロード: 2.6 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

で確認できます。

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

アセットの更新タイミングを決定できるように、管理するロケーションにアイコンフォントをホストします。たとえば、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 サポートユーザーが合字を処理できるかどうかを確認できますできます。

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

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

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

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

Android での使用

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

iOS での使用

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

Flutter での使用

マテリアルシンボルの Flutter サポートも計画されています。決まり次第、改めてお知らせいたします。