Angularコンポーネントのカプセル化がネイティブに設定されたMaterialアイコンフォントを使用

Question

これまでコンポーネントのカプセル化がエミュレートされている限り、Angular 4+プロジェクトでMaterialのアイコンフォントを使用しました。現在のプロジェクトではChromeの最新バージョンをサポートするだけで済みますので、すべてのコンポーネントをViewEncapsulation.Nativeに設定しようとしていましたが、これはブラウザのネイティブShadowDOMを使用していることがわかります。しかし、自分のコンポーネントでレンダリングするマテリアルアイコンフォントを取得できません。

：ネイティブに設定されたカプセル化を使用して、私はアイコンフォントを使用してレンダリングされていない次のことを、持っている、

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

そして、私の検索コンポーネントで：

は私のindex.htmlファイルで、私は次のようにフォントが含まれています

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

Angularのネイティブカプセル化でアイコンフォントを使用したことがありますか？

Answer 1

私はあなたと同じ問題を抱えていました。それを解決することができます。あなたの開始コンポーネントであるAppComponentがあるとしましょう。

encapsulation: ViewEncapsulation.None 

をそしてAppComponentスタイルで、あなたは全体のアプリで使いたいスタイルを追加することができます。

があります。