web-dev-qa-db-ja.com

新しいマテリアルデザインアイコンのテーマの使い方：アウトライン、丸みを帯びた、ツートーン、シャープ？

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フォーマットとしてダウンロードすることだけを意味しているのでしょうか。

前もって感謝します。

iconsmaterial-designgoogle-material-icons
76
Aj334

更新（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-announcement

3）オプションの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が見つけた場合、この投稿を更新します。

86
Aj334

2019年2月27日現在、新しいMaterial Iconテーマ用のCSSフォントがあります。

ただし、フォントを使用するにはCSSクラスを作成する必要があります。

フォントファミリは次のとおりです。

  • Material Icons Outlined - 輪郭を描かれたアイコン
  • Material Icons Two Tone - ツートンカラーのアイコン
  • Material Icons Round - 丸みを帯びたアイコン
  • Material Icons Sharp - 鋭いアイコン

例として、以下のコードサンプルを参照してください。

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  Word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

または Codepen でそれを見る

編集：2019年3月10日現在、新しいフォントアイコンのためのクラスが今あるようです：

body {
  font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

編集＃2：これは CSS画像フィルタを使用してツートンカラーのアイコンを着色するための回避策です （コードは このコメントから適応したもの ）：

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

または Codepen でそれを見る

13
Edric

私にとってうまくいったのはアイコン名の後に _outline not _outline d を使うことです。

<mat-icon>info</mat-icon>

vs

<mat-icon>info_outline</mat-icon>
8
fxrxz

Webプロジェクトで既にmaterial-iconsを使用している場合は、htmlファイルの参照とアイコンの使用クラスを更新する必要があります。

htmlリファレンス：

前

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

後

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

マテリアルアイコンクラス：

その後、使用しているclassNameを確認してください：

前：

<i className="material-icons">weekend</i>

後：

<i className="material-icons-outlined">weekend</i>

それは私のために働く... Pura vida！

5
rocaes90

新しいテーマはおそらく（まだ？）Material Iconsフォントの一部ではありません。 https://github.com/google/material-design-icons/issues/773

5
Martin

Aj334の最近の編集は完璧に機能します。

google CDN

<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>
1
lakshmeesha

ちょっと嬉しいことに、GoogleはSafariでは正しく機能するがChromeでは機能しないフォントを作成しました。これが https://codepen.io/anon/pen/zbavza です

<i class="material-icons-round red">warning</i>

red round warning material icon in safari

https://stackoverflow.com/a/54902967/4740291 を参照すると、cssを使用して色を変更することはできません。

0
Kyle Snow Schwartz

私は最近のWebアプリのビルドに必要な新しいテーマのアイコンのみを使用してカスタムフォントを作成するためにIcoMoonアプリを使用しました。完璧ではありませんが、わずかな設定で既存のGoogleフォント機能を非常によく再現できます。これが記事です。

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

誰かが大胆に感じているなら、彼らはIcoMoonを使ってテーマ全体を変換することができます。地獄、IcoMoonはおそらく彼らが彼らのライブラリーに設定されたオリジナルのMaterialアイコンをすでに持っているのでそれを容易にするであろう内部プロセスを持っています。

とにかく、これは完璧な解決策ではありませんが、それは私のために働いた。

0
Lee Martin

angularマテリアルの場合、fontSet入力を使用してフォントファミリを変更する必要があります。

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

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
0
Ron Netzer

ウェブフォントのリンクは、すべてのブラウザで動作します。

このように、テーマをフォントリンクにパイプ（|）で区切って追加するだけです。

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

次に、このようにクラスを参照します。

// class="material-icons" or class="material-icons-outlined"

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

このパターンはAngularでも機能します。

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
0
intergalactic

Googleが新しいデザインをフォントやSVGのアイコンセットとしてリリースしていないことを知るまで、私は不満でした。そこで私は問題を解決するために小さなnpmパッケージをまとめました。

https://www.npmjs.com/package/ts-material-icons-svg

使用したいアイコンをインポートしてレジストリに追加するだけです。あなたが本当に望むそして/または必要とするそれらのアイコンだけがあなたのプロジェクトに追加されるので、これはまたツリー揺れをサポートします。

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

たとえば2つのトーンアイコンを使用する

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

あなたのhtmlテンプレートであなたは今新しいアイコンを使うことができます

<mat-icon svgIcon="edit"></mat-icon>
0
MarcusCalidus