使用 Material 图标字体并将 Angular 组件的封装设置为原生答案

【问题标题】：Using Material icon font with Angular component's encapsulation set to native使用 Material 图标字体并将 Angular 组件的封装设置为原生
【发布时间】：2018-01-06 11:39:47
【问题描述】：

只要模拟组件的封装，我过去就在 Angular 4+ 项目中使用 Material 的图标字体。我目前的项目只需要支持最新版本的 Chrome，所以我打算尝试将所有组件设置为 ViewEncapsulation.Native，据我所知，它使用浏览器的原生 ShadowDOM。但是，我无法让 Material 图标字体在我的任何组件中呈现。

在我的 index.html 文件中，我的字体包括：

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

在我的搜索组件中，封装设置为原生我有以下内容，它不是使用图标字体呈现的：

<md-icon>search</md-icon>

有没有人成功使用带有 Angular 原生封装的图标字体？

【问题讨论】：

你安装了素材模块吗？
您能否向我们展示您的完整代码以及控制台中的任何错误？
是的，我已经安装了 Material 模块。如果我将封装设置为仿真，它工作正常。当您将其设置为 Native 时，没有错误，只是不显示图标。它显示文本“搜索”而不是搜索图标。我意识到这是因为原生 ShadowDOM，但是你将如何使用带有原生封装的 Material Icons？

标签： css angular angular-material2 shadow-dom google-material-icons

【解决方案1】：

我遇到了和你一样的问题。你可以解决这个问题，假设你有 AppComponent，它是你的启动组件。

添加：

encapsulation: ViewEncapsulation.None

然后在 AppComponent 样式中，您可以添加要在整个应用中使用的样式。

【讨论】：

【解决方案2】：

我遇到了和你一样的问题。似乎 CSS @font-face at-rule 不适用于 Shadow DOM，这就是材质图标不适用于 Native ViewEncapsulation 的原因。

在https://bugs.chromium.org/p/chromium/issues/detail?id=336876这里有一个关于这个问题的讨论，但我相信它暂时没有解决方案。

作为一种解决方法，我可以建议基于 SVG 的图标而不是基于字体的图标，它们应该可以很好地与 Shadow DOM 一起使用。

【讨论】：