使用材料圖標字體和Angular組件的封裝設置爲本地

只要模擬組件的封裝，我已經使用過材料的圖標字體與Angular 4+項目。我當前的項目只需要支持最新版本的Chrome，因此我將嘗試將所有組件設置爲ViewEncapsulation.Native，我知道它使用瀏覽器的本機ShadowDOM。但是，我無法獲取要在我的任何組件中呈現的「材質」圖標字體。使用材料圖標字體和Angular組件的封裝設置爲本地

在我的index.html文件我已經包括像字體：

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

而在我的搜索組件，與封裝設置爲本地我有以下的，未使用的圖標，字體顯示：

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

有沒有人成功地使用Angular的本地封裝圖標字體？

來源

2017-07-31 Jeremy

您是否安裝了材料模塊？ –

您可以向我們展示您的完整代碼和控制檯中的任何錯誤嗎？ – Edric

是的，我安裝了Material模塊。它工作正常，如果我將封裝設置爲仿真。當你將它設置爲本機時，沒有錯誤，它只是不顯示圖標。它顯示文字「搜索」而不是搜索圖標。我意識到這是因爲本機ShadowDOM，但你會如何使用本機封裝的材料圖標？ – Jeremy

我和你有同樣的問題。你可以解決這個問題，讓我們假設你有AppComponent是你的開始組件。

添加有：

encapsulation: ViewEncapsulation.None

然後在AppComponent風格，你可以添加你想要在整個應用程序中使用的樣式。

來源

2017-11-05 20:36:26

使用材料圖標字體和Angular組件的封裝設置爲本地

回答

相關問題