我已经使用了Material的图标字体过去使用了Angular 4+项目，只要模拟了组件的封装。我目前的项目只需要支持最新版本的Chrome，所以我将尝试将所有组件设置为ViewEncapsulation.Native，我理解使用浏览器的原生ShadowDOM。但是，我无法在我的任何组件中呈现Material图标字体。
在我的index.html文件中，我的字体包括：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
在我的搜索组件中，封装设置为native我有以下内容，不使用图标字体呈现：
<md-icon>search</md-icon>
是否有人使用Angular的原生封装图标字体成功？
答案 0 :(得分：0)
我遇到了和你一样的问题。你可以解决这个问题，我们假设你有一个AppComponent，这是你的开始组件。
添加：
encapsulation: ViewEncapsulation.None
然后在AppComponent样式中，您可以添加要在整个应用程序中使用的样式。
答案 1 :(得分：0)
我遇到了与您完全相同的问题。
看来CSS @font-face的基本规则还不适用于Shadow DOM，这就是为什么材质图标不适用于Native ViewEncapsulation的原因。
https://bugs.chromium.org/p/chromium/issues/detail?id=336876上有关于此事的讨论，但我认为目前尚无解决方案。
作为一种变通办法，我可以建议基于SVG的图标而不是基于字体的图标，它们应该可以与Shadow DOM正常工作。