Using Material icon font with Angular component's encapsulation set to native

user_572078 0
Viewed 1033

I've used Material's icon font in the past with Angular 4+ projects as long as the component's encapsulation was emulated. My current project only needs to support the latest versions of Chrome so I was going to try to set all the components to ViewEncapsulation.Native, which I understand uses the browser's native ShadowDOM. However, I can't get the Material icon font to render in any of my components.

In my index.html file I have the font included like:

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

And in my search component, with encapsulation set to native I have the following, which is not rendered using the icon font:

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

Has anyone been successful using an icon font with Angular's native encapsulation?

angular-material2 google-material-icons shadow-dom angular css
2 Answers

I had the same problem as you do. You can solve that, let's assume you have AppComponent which is your start component.

Add there:

encapsulation: ViewEncapsulation.None

And then in AppComponent styles you can add styles which you want use in whole app.

user_18648400

I've had the exact same issue as you. It seems that the CSS @font-face at-rule doesn't work yet with Shadow DOM and that's why material icons don't work with Native ViewEncapsulation.

There's a discussion on this matter here https://bugs.chromium.org/p/chromium/issues/detail?id=336876 but I believe it has no solution for the moment.

As a workaround, may I suggest SVG-based icons instead of font-based, they should work just fine with Shadow DOM.

user_35554190
Related