☰

Angular 4でマテリアルデザインアイコンを使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon angular angular-material2
Angular 4でマテリアルデザインアイコンを使用するにはどうすればいいですか? 質問する

アイコンを使いたいhttps://materialdesignicons.com/私のAngular 4プロジェクトで。ウェブサイトの説明では、Angular 1.x（https://materialdesignicons.com/getting-started）

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

google material icons注:異なるものをすでに含めました。

ベストアンサー1

SCSS の使用を好む人向け:

フォントをインストールする

$> npm install material-design-icons

インポートするsrc/styles.scss

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

それをHTMLで説明通りに使用しますここ

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

参照するにはサム・クラウスコメントありがとうございます。Templarian のデザインアイコンのインストールと使用を追加しました。上記と似ています。

パッケージマネージャーからフォントをインストールする

$> npm install @mdi/font

のコメントに記述されているようにsrc/styles.scss、 または のスタイルシートをインポートします。angular.jsonA. モレル ここ

@import '~@mdi/font/css/materialdesignicons.css';

またはCDN URLindex.htmlなどで記述されているようにHTMLで使用してくださいここ

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

補遺: 私の回答は少し古いものです。これはまだ問題なく動作しますが、もはや最先端の​​ものではありません。A. モレル ここもう少し現代的です。

おすすめ記事