使用材质图标字体，将Angular组件的封装设置为native

Question

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

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

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

在我的搜索组件中，封装设置为native我有以下内容，不使用icon字体呈现：

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

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

Answer 1

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

在那里添加：

encapsulation: ViewEncapsulation.None

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

Answer 2

我和你有完全相同的问题。似乎CSS @font-face at-rule在Shadow DOM中不起作用，这就是为什么材质图标不适用于Native ViewEncapsulation的原因。

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

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