[解決済み】マテリアルデザインの新アイコンテーマを使う方法。Outlined, Rounded, Two-Tone and Sharp?

質問

Googleがリニューアルした マテリアルデザインアイコン 4つのプリセットテーマを追加しました。

アウトライン、ラウンド、ツートーン、シャープ に加え、通常の 塗りつぶし/ベースライン というテーマがあります。

---

しかし、残念ながら、新しいテーマの使い方はどこにも書いてありません。

---

私は、これまで Google Web Fonts経由で使用する リンクを貼ることで。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

そして、必要なアイコンを使って ドキュメントで提案されているように :

<i class="material-icons">account_balance</i>

しかし、常に「Filled/Baseline」バージョンが表示されます。

---

を使うために、以下のようなことを試してみました。 アウトライン テーマで代用してください。

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

と、Web Fontsのリンクを変更する。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

などです。しかし、うまくいきません。

---

そうやって闇雲に撮影しても意味がありませんしね。

---

tl;dr: 新しいテーマを使ってみた方はいらっしゃいますか？ベースライン版（インラインhtmlタグ）のように動作することもあるのでしょうか？それとも、SVGやPNG形式でダウンロードすることだけを想定しているのでしょうか？

解決方法は？

更新（2019/03/31）：すべてのアイコンテーマがGoogle Web Fonts経由で動作するようになりました。

Edricが指摘したように、今はドキュメントのheadにgoogle web fontsのリンクを以下のように追加すればいいだけです。

<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で変更可能です。

注：ツートンカラーテーマのアイコンは、現在、少し不具合があります。

---

更新（2018/11/14） : サフィックスが "_outline" で動作するアウトラインアイコン16個の一覧です。

通常の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_ 概要 であり、not 概要 .

---

これは、インラインタグを使用した新しいアイコンテーマをテストするためのハックです。公式の解決策ではありません。

新アイコンテーマの導入から2ヶ月あまりが経過した今日現在（2018年7月19日）。 ノーウェイ インラインタグを使用してこれらのアイコンを含めるには <i class="material-icons"></i> .

+マーチン は、Githubに同じ内容のissueが上がっていることを指摘しています。 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">

ツートーン

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

これらのファイルには、それぞれのテーマのアイコンがbackground-images（Base64 image-data）として含まれています。そして、これを利用して、本番環境で使用するためにダウンロードする前に、デザインにおける特定のアイコンの互換性をテストする方法を説明します。

---

ステップ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-

ツートーン twotone-

シャープ sharp-

Eg（「お知らせ」アイコンの場合）。

outline-announcement , round-announcement , twotone-announcement , sharp-announcement

3) オプションの3番目のクラスを使用する icon-white 黒から白に色を反転させるため（暗い背景の場合）。

---

アイコンサイズを変更する。

これはfont-iconではなくbackground-imageであるため、font-iconと同様に height と width プロパティを使って、アイコンの大きさを変更することができます。デフォルトは24pxに設定されています。 material-icons-new クラスがあります。

---

例

ケースI の場合 概要 のテーマ アカウントサークル アイコンを表示します。

1. スタイルシートをインクルードします。

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

1. ページにiconタグを追加します。

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

1. ページにiconタグを追加します。

<i class="material-icons-new sharp-assessment"></i>

(暗い背景の場合)。

<i class="material-icons-new sharp-assessment icon-white"></i>

---

これは、本番環境でアイコンを含めるための正しい方法ではないことは、いくら強調してもしきれません。しかし、開発中のページで複数のアイコンをスキャンする必要がある場合、アイコンの組み込みをかなり簡単にし、多くの時間を節約します。

サイトスピードの最適化を考えると、SVGやPNGでダウンロードした方が良いのは確かですが、プロトタイピングの段階で、特定のアイコンがデザインに合うかどうかなどをチェックするには、フォントアイコンが時間の節約になります。

---

この問題に対して、Googleがアイコンをダウンロードして使用しない解決策を打ち出したら、この記事を更新する予定です。