如何正确地将mdi包含到Angular2 webpack中

Question

如果将材料设计图标包含在angular2 webpack中,您能否帮我一步一步指导(或链接,如果您知道一些)？

我确实通过npm install mdi安装了它(我找到的一个资源就像这样提到它)和npm install material-design-icons(来自https://www.npmjs.com/package/material-design-icons) .我也通过依赖尝试了它.

但这还不够.据我了解,我还要对webpack说他应该使用它.但我不知道我怎么也找不到它.

所以现在我正在使用它:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.min.css'>
  <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.4.57/css/materialdesignicons.min.css">

但那不是我想要的方式.

任何意见,将不胜感激.

Answer 1

我希望你现在已经找到了答案,但如果不遵循这些指示

1. 通过npm安装材料设计图标: npm install mdi --save

2. 我希望你可能会用angular-cli.如果是这样打开angular-cli.json并在"样式"数组中添加

   "styles": [
           "../node_modules/mdi/css/materialdesignicons.min.css"
         ]
   

3. 接下来在addons添加字体如下

"addons": [
         "../node_modules/mdi/fonts/*.+(eot|svg|ttf|woff|woff2)"
      ],

4. 停止控制台和ng server.要测试它是否有效,请将其添加到组件并进行检查.<i class="mdi mdi-sitemap mdi-24px">
5. 如果它有效,那么您已成功将mdi图标添加到angular 2项目