web-dev-qa-db-ja.com

Angular 4でマテリアルデザインアイコンを使用する方法

angular 4プロジェクトで https://materialdesignicons.com/ のアイコンを使用したい。ウェブサイトの手順では、Angular 1.x（ https://materialdesignicons.com/getting-started ）に含める方法のみを説明しています。

<md-icon svgIcon="source"></md-icon>およびAngular Materialを使用してng serveのように使用できるように、マテリアルデザインアイコンを含めるにはどうすればよいですか。

注：すでに異なるgoogle material iconsを含めました！

angularangular-material2
35
Matthias Herrmann

次の手順に従ってください。

  1. here のAngular Materialセクションの下からmdi.svgをダウンロードし、assetsフォルダーに配置します。 （プロジェクトのルートから）/src/assetsに配置する必要があります。

    Documentation<code>assets</code> folder

  2. アプリのモジュール（別名app.module.ts）で、次の行を追加します。

    import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
...
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));
  }
}

  3. assetsの.angular-cli.jsonの下にassetsフォルダーが含まれていることを確認してください（デフォルトではありますが）：

    {
  "apps": [
    {
      ...
      "assets": [
        "assets"
      ]
    }
  ]
}

  4. 最後に、MatIconコンポーネントでsvgIcon入力を使用して使用します。

    <mat-icon svgIcon="open-in-new"></mat-icon>

更新

それ以降のバージョンで動作するように、手順を変更しました。

28
Edric

Scssを使用するすべてのユーザーの場合：

npm install material-design-icons

src/styles.scss内

@import '~material-design-icons/iconfont/material-icons.css';

そして、説明されているようにHTMLで ここ

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

補遺：私の答えは少し古いです。これはまだ正常に機能しますが、もはや最新技術ではありません。 @Aの答え。 Morel here はもう少し現代的です。

52
creep3007

@ creep3007による回答と同様に、.angular-cli.jsonでスタイルシートを指定できます。

  1. Npmパッケージをインストールする

    npm install material-design-icons --save

  2. 材料アイコンを.angular-cli.jsonに追加します

    {
  "apps": [
    {
      "styles": [
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

  3. これを使って

    <i class="material-icons">visibility</i>
15
tilo

Npmパッケージをインストールする

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

マテリアルアイコンcssを.angular-cli.jsonに追加します（「ng serve」を再起動することを忘れないでください）

{
  "apps": [
    {
      "styles": [
        "node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

またはsrc/styles.scssで

@import '~material-design-icons/iconfont/material-icons.css';

App.module.tsにモジュールをインポートします

import { MatIconModule } from '@angular/material/icon';

...

@NgModule({
  imports: [
      ...,
      MatIconModule
  ],

そしてそのように使用します：

<mat-icon>location_off</mat-icon>

マテリアルデザインアイコンから名前を選択=> https://material.io/tools/icons/?style=baseline

9
A. Morel

注この回答は、 テンプラリアンのマテリアルデザインアイコン に適用され、Googleの同名のアイコンには適用されません。これらの手順がReadmeに含まれていない理由はわかりませんが、ここで説明します。

まず、パッケージをインストールします。

npm install @mdi/font --save

次に、スタイルシートをstyles.scssファイルに追加する必要があります。ファイルの最後に次を追加しました。

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

注$mdi-font-pathは、@mdi/font/scss/_variables.scss内のデフォルトセットをオーバーライドするために必要です。これにより、webpackコンパイラがエラーを出します。これを忘れると、次のような一連のエラーが発生します。

./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scssモジュールのエラー見つかりません：エラー：「/ home/myRepo/myApp」の「../fonts/materialdesignicons-webfont.eot」を解決できません

Edit：これが必要かどうかわかりません（おそらく場合によっては）が、.angular-cli.jsonファイルstylesも更新しました素子：

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

上記に代わるもう1つの方法は、アイコンを非常に少ない労力で機能させることで、CSSを直接​​インポートすることでした。 TypeScriptファイルで、styleUrls要素を置き換えました（Karmaの奇妙なバグを回避するため）。

 // styleUrls: ['./graphics-control.component.css'],
  styles: [require('./my.component.css'),
           require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]
4
theMayer

Bootstrap 4およびAngularを使用すると、これは機能します。

1）実行：

npm install material-design-icons --save

2）styles.cssまたはstyles.scssに追加します

@import '~material-design-icons/iconfont/material-icons.css';

3）：..\node_modules\material-design-icons\iconfont\material-icons.cssに移動し、セクションがこのようになることを確認します（ 'MaterialIcons-Regular.woff2'）。 。：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.woff2') format('woff2'),
       url('MaterialIcons-Regular.woff') format('woff'),
       url('MaterialIcons-Regular.ttf') format('truetype');
}

4）HTMLでアイコンを使用：

<i class="material-icons">visibility</i>
2
Evgeny Lukiyanov

@ theMayer answerに基づいて、パッケージ@mdi/fontで機能するバージョンがあります。

1- npm install @mdi/font --save

2- angular.jsonのarchitect/buid/options/stylesの下に、"node_modules/@mdi/font/css/materialdesignicons.min.css"を追加します

3- src\app\app.module.tsにimport { MatIconModule } from '@angular/material/icon';を追加し、MatIconModuleセクションにimportsを追加します

4- src\styles.scssに追加：

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

5-たとえば、mat-iconを使用してhtmlにアイコンを追加します。

<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>
0
Michael