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

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

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

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

`FILL` 軸

Fill ではデフォルトのアイコンスタイルを変更できます。1 つのアイコンでレンダリングされます。

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

`wght` 軸

太さは記号のストロークの太さを定義します。太さの範囲は thin（100）と太字（700）の 2 つがあります。重量は、スペース全体のサイズにも記号で示されます。

`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" />

上記のスニペットには、各 URL のデフォルト構成が軸、重み 400、光学サイズ 48 歳、採点 0、入力（または 0.）

こちらのフォント CSS API さまざまな軸の値を設定できます。次の例をご覧ください。

<ph type="x-smartling-placeholder">で確認できます。 <ph type="x-smartling-placeholder">

Google Fonts の可変フォント

CSS でアイコンをアニメーション化する場合や、アイコン機能を細かく制御する場合は、 Google Symbols の可変フォントです。範囲（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 でのアイコンの使用

上記の例では、合字、を使用すると、テキスト名を使用するだけでアイコングリフをレンダリングできます。「ブラウザでは、テキストの合字が自動的にアイコンベクトルに置き換えられ、は、同等の数字文字参照よりも読みやすいコードを提供します。対象たとえば、HTML では arrow_forward でアイコンを表しますが、  の代わりに表示されます。その他のアイコンには、アイコン名のヘビケースを使用します。（スペースをアンダースコアに置き換えるなど）。

この機能は、パソコンとモバイルの両方の最新のブラウザでサポートされています。できます。詳しくは、 Use の合字のサポートを利用できますか？ユーザーが合字を処理できるかどうかを確認できますできます。

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

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

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

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

Android で使用

マテリアルシンボルライブラリでは、すべてのアイコンがベクター型ドローアブル形式になっています。宛先詳細については、 Android Vector Asset Studio のドキュメント

iOS で使用

アイコンは Apple Symbols 形式でも使用できます。詳しくは公式の Apple Symbols をチェック概要および使用方法のガイダンスをご覧ください。

Flutter で使用する

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