4

只要模拟了组件的封装，我过去就在 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 原生封装的图标字体？

4

2 回答 2

0

我和你有完全相同的问题。似乎 CSS @font-faceat-rule 不适用于 Shadow DOM，这就是材质图标不适用于 Native ViewEncapsulation 的原因。

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

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

于 2018-08-01T12:45:41.847 回答
0

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

在那里添加：

encapsulation: ViewEncapsulation.None

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

于 2017-11-05T20:36:26.253 回答