新しいマテリアル デザイン アイコン テーマ (アウトライン、丸み、ツートン、シャープ) の使い方は? 質問する

pie_chart はoutlineではなく、 " pie_chart_ outlined "である必要があることに注意してください。

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

新しいアイコン テーマが導入されてから 2 か月強が経過した今日 (2018 年 7 月 19 日) 時点では、インライン タグを使用してこれらのアイコンを含める方法はありません<i class="material-icons"></i>。

+マーティン同じことに関して Github で問題が提起されていることを指摘しました。https://github.com/google/material-design-icons/issues/773

そこで、Google が解決策を思いつくまで、適切なアイコンを SVG または PNG としてダウンロードする前に、開発環境にこれらの新しいアイコン テーマを組み込むハックを使い始めました。そして、それを皆さんと共有しようと思いました。

重要: Google から提供される各 CSS ファイルのサイズは 1 MB を超えるため、本番環境では使用しないでください。

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);
}

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

<i class="material-icons-new outline-account_circle"></i>

<i class="material-icons-new outline-account_circle icon-white"></i>

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

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

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