質問: 新しいマテリアルデザインアイコンのテーマの使い方:アウトライン、丸みを帯びた、ツートーン、シャープ? googleは、 material design icons に4つの新しいプリセットテーマを刷新しました。通常のfilled/baselineテーマに加えて、outlined、rounded、two-tone、sharpがあります。ただし、残念ながら、新しいテーマの使い方はどこにも記載されていません。私は google web fontsでそれを使っています リンクを含めることで/<link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> そして、必要なアイコン を使用してドキュメントで提案されているように :<i class="material-icons">account_balance</i> しかし、それは常に 'filled/baseline'バージョンを示しています。代わりにoutlinedテーマを使用するために次のことを試みました。<i class="material-icons">account_balance_outlined</i> <i class="material-icons material-icons-outlined">account_balance</i> また、webフォントのリンクを次のように変更します。<link href="https://fonts.googleapis.com/icon?family=material+icons&style=outlined" rel="stylesheet"> しかし、それはうまくいきません。そして、そのように暗闇の中でショットを撮っても意味がありません。tl; dr:誰かが新しいテーマを使ってみましたか?それはベースラインバージョン(インラインhtmlタグ)のようにさえ動作しますか?それとも、svgまたはpngフォーマットとしてダウンロードすることだけを意味しているのでしょうか。前もって感謝します。
回答: 更新(2019年3月31日):すべてのアイコンテーマが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を使用して変更できます。注:現在、ツートーンテーマのアイコンは少しグリッチです。更新(2018年11月14日):サフィックス "_outline"で機能する16個のアウトラインアイコンのリスト。_ outline接尾辞(テストおよび確認済み)を使用して、通常のmaterial-icons webfontで機能する16のアウトラインアイコンの最新リストを次に示します。( material-design-icons github page にあります。検索: "_ 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 _outlined」ではなくoutline。これは、インラインタグを使用して新しいアイコンテーマをテストするためのハックです。これは公式の解決策ではありません。今日(2018年7月19日)、新しいアイコンのテーマが導入されてから2か月強で、これらのアイコンを使用する方法はありませんインラインタグ<i class="material-icons"></i>。 + martin は、同じことに関してgithubで発生した問題があることを指摘しています: https://github.com/google/material-design-icons/issues/77 だから、googleがこれに対する解決策を思い付くまで、ハックを使用して、これらの新しいアイコンテーマを開発環境に含めてからダウンロードしました適切なアイコン(svgまたはpng)。そして、皆さんと共有したいと思いました。important: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"> これらの各ファイルには、背景画像(base64画像データ)として含まれるそれぞれのテーマのアイコンが含まれています。そして、実稼働環境で使用するためにダウンロードする前に、これを使用してデザイン内の特定のアイコンの互換性をテストする方法を示します。ステップ1:使用するテーマのスタイルシートを含めます。例:「outlined」テーマの場合、「outline.css」のスタイルシートを使用しますステップ2:次のクラスをownスタイルシートに追加します。.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:次のclassesを<i>タグに追加して、アイコンを使用します。1)material-icons-newクラス2)テーマ名の後にハイフンが付いた、素材アイコンのデモページに表示されるアイコン名。プレフィックス:概説:outline-角丸:round-ツートーン:twotone-シャープ:sharp-例(「お知らせ」アイコンの場合):outline-announcement、round-announcement、twotone-announcement、sharp-announcement3)オプションの3番目のクラスicon-whiteを使用して、色を黒から白に反転します(暗い背景用)アイコンサイズの変更:これはフォントアイコンではなく背景画像なので、cssのheightおよびwidthプロパティを使用してアイコンのサイズを変更します。 material-icons-newクラスのデフォルトは24pxに設定されています。例:ケースi:outlinedのテーマ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:sharpのテーマassessmentアイコン: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が見つけた場合、この投稿を更新します。