如何正确包含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和 “样式” 阵列在addons添加

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

3. 接着添加字体如下

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

停止控制台和ng server。为了测试这个工作，将其添加到组件并检查。 <i class="mdi mdi-sitemap mdi-24px">

如果成功，那么你已经成功添加MDI图标角2项目