更新（31/03/2019）：すべてのアイコンテーマがGoogle Web Fonts経由で機能するようになりました。
Edricが指摘したように、次のように、ドキュメントのヘッドにGoogle Webフォントリンクを追加するだけです。
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
そして、特定のテーマのアイコンを出力するための正しいクラスを追加します。
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
アイコンの色もCSSを使用して変更できます。
注：現在、ツートンテーマのアイコンは少し問題があります。
更新（14/11/2018）：「_outline」サフィックスで機能する16個のアウトラインアイコンのリスト。
以下は、_outlineサフィックス（テスト済みおよび確認済み）を使用して、通常のMaterial-icons Webfontで機能する16個のアウトラインアイコンの最新リストです。
（material-design-icons githubページにあります。「_outline_24px.svg」を検索してください）
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
注ことpie_chartのニーズがあることを「pie_chart_は概説」としませ概説します。
これは、インラインタグを使用して新しいアイコンテーマをテストするためのハックです。それは公式の解決策ではありません。
今日（2018年7月19日）の時点で、新しいアイコンテーマが導入されてから2か月余り、インラインタグを使用してこれらのアイコンを含める方法はありません<i class="material-icons"></i>。
+ Martinは、Githubで同じ問題が発生していると指摘しています：https : //github.com/google/material-design-icons/issues/773
そのため、Googleがこの解決策を見つけるまで、ハッキングを使用してこれらの新しいアイコンテーマを開発環境に組み込んでから、適切なアイコンをSVGまたはPNGとしてダウンロードしました。そして、皆さんと共有したいと思いました。
重要：Googleに含まれている各CSSファイルのサイズは1MBを超えるため、本番環境では使用しないでください。
Googleはこれらのスタイルシートを使用して、デモページでアイコンを紹介しています。
概要：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
丸め：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
2トーン：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
シャープ：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
これらの各ファイルには、背景画像（Base64画像データ）として含まれているそれぞれのテーマのアイコンが含まれています。これを使用して、デザイン内の特定のアイコンの互換性をテストしてから、本番環境で使用するためにダウンロードする方法を示します。
ステップ1：
使用するテーマのスタイルシートを含めます。例：「Outlined」テーマの場合、「outline.css」のスタイルシートを使用します
ステップ2：
次のクラスを独自のスタイルシートに追加します。
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
ステップ3：
アイコンを使用するには、次のクラスを<i>タグに。
1）material-icons-newクラス
2）マテリアルアイコンのデモページに表示されるアイコン名。先頭にテーマ名があり、その後にハイフンが続きます。
接頭辞：
概説： outline-
丸め： round-
2トーン： twotone-
シャープ： sharp-
例（「お知らせ」アイコンの場合）：
outline-announcement、round-announcement、twotone-announcement、sharp-announcement
3）オプションの3番目のクラスicon-whiteを使用して、色を黒から白に反転します（背景が暗い場合）
アイコンサイズの変更：
これはフォントアイコンではなく背景画像であるため、CSS のheightおよびwidthプロパティを使用してアイコンのサイズを変更します。material-icons-newクラスのデフォルトは24pxに設定されています。
例：
ケースI：account_circleアイコンのアウトラインテーマの場合：
1）スタイルシートを含める：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2）ページにアイコンタグを追加します。
<i class="material-icons-new outline-account_circle"></i>
オプション（暗い背景の場合）：
<i class="material-icons-new outline-account_circle icon-white"></i>
ケースII：評価アイコンのシャープなテーマの場合：
1）スタイルシートを含める：
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2）ページにアイコンタグを追加します。
<i class="material-icons-new sharp-assessment"></i>
（暗い背景の場合）：
<i class="material-icons-new sharp-assessment icon-white"></i>
これが、本番環境にアイコンを含めるのに適切な方法ではないことを強調しておきます。しかし、開発中のページで複数のアイコンをスキャンする必要がある場合は、アイコンを含めるのが非常に簡単になり、時間を大幅に節約できます。
サイト速度の最適化に関しては、SVGまたはPNGとしてアイコンをダウンロードする方が確実に優れたオプションですが、プロトタイピングフェーズと特定のアイコンがデザインに適合するかどうかを確認する場合、フォントアイコンは時間の節約になります。
使用するためのアイコンのダウンロードを含まないこの問題の解決策がGoogleで見つかった場合は、この投稿を更新します。
