材质图标似乎在模板（Web组件）中不起作用

Question

我试图在页面（LINK）中使用Web的材料组件。

能够使用MDC创建FAB，您可以在此处找到它们[CODE-PEN] [2]

但是当我尝试在模板和自定义元素（Web组件）中执行相同操作时，它似乎无法正常工作LINK

我为FAB获得了正确的CSS，但是未显示该图标。有人可以帮我吗？

MDC LINK 1：https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab

WORKING [2]：https://codepen.io/rleo2joseph/pen/GRRZGRv

NOT WORKING [3]：https://codepen.io/rleo2joseph/pen/KKKzeqY?editors=1010

Answer 1

似乎（css）的导入顺序不正确...我已经尝试过：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

它工作得很好...（也许material-components-web覆盖了一些重要的图标定义）

无论如何-我确实希望您将组件内的css链接仅用于演示目的，并且将原始代码中的css减速度放置在页面的顶部（或其他任何css引导程序）

---

更新：

请在笔配置（css部分）中包括“材质图标”，如下所示：

再次，我确实希望您在项目中定义了链接（及其顺序），正如我在原始答案中已经指出的那样……确实不建议在组件内部包含link元素（导入多个组件）将导致多次不必要的导入）