Feature request: support viewEncapsulation.Native and ShadowDom

[arthurRbr]

When using viewEncapsulation.Native (shadow DOM), some styles are missing in the component because they are set globally in the head section. For example, you cannot set the size.

This would be a nice evolution to support Angular Elements (web components) that can be shared across other websites without leaking on the global DOM.

[RezaRahmati]

Please support this feature, it's needed when creating web components

@Amiral1 did you find a workaround for size?

[devoto13]

I think the root cause is that styles used by FA are not component scoped (#18 and #48). We'll have to solve this issue first. That alone may be enough to resolve the problem described here.

~One (dirty) workaround I can think of is to extend FaIconComponent in your own code, set desired view encapsulation and add style.css file (mentioned here) to its styleUrls. Also add window.FontAwesomeConfig.autoAddCss = false right after first import from angular-fontawesome to prevent FA from adding global CSS.~ Never mind, it won't work.

[bjornharvold]

Would love support for this and also with Angular's new ViewEncapsulation.ShadowDom. Similar work has been done here: https://github.com/oliverandrich/fa-icon-polymer