在带有 Angular Nx Storybook 的库组件中使用 Material 图标

Question

我很难在 Nx 故事书中使用 Angular material 图标。

以下是 angular.json 中的配置方式，我想我配置不正确，请告诉我正确的配置方式。请注意我不能像下面那样使用 link，因为我正在构建一个库，它不是一个应用程序。

<link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />

这是图标的显示方式。

Answer 1

我是这样做的。你可以试试这个

npm install material-design-icons

 // angular.json

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

// style.css
   @import '~material-design-icons/iconfont/material-icons.css';
 
// html  
<i class="material-icons">cloud_upload</i>

Answer 2

我还找到了为故事书指定第三方 css 的正确方法（我正在使用 Angular）。它应该位于 build-storybook --> angular.json 文件中的选项部分。

在带有 Angular Nx Storybook 的库组件中使用 Material 图标

Using Material icons inside a library component with Angular Nx Storybook

angular

angular-material

nrwl-nx