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

Question

您能否帮助我提供有关如何将 Material Design 图标包含到 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 安装 Material Design 图标:npm install mdi --save

2. 我希望您可能使用angular-cli 。如果是这样打开angular-cli.json并在“styles”数组中添加

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

3. 下一个 addons添加字体如下

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

停止控制台并 ng server 。要测试其工作原理，请将其添加到组件中并进行检查。 <i class="mdi mdi-sitemap mdi-24px">

如果有效，那么您已成功将 mdi 图标添加到 Angular 2 项目