devoto13
commented
4 years ago You can apply styles on the fa-icon element itself without any hacks. But the whole point of the view encapsulation is to prevent your styles from leaking into other components' internal elements, so this works as intended and is not related to either of the linked issues.
If you want to override styles of the fa-icon internals you should either define them in global styles (which don't have view encapsulation), disable view encapsulation for the parent component (note that styles defined in the parent component will be applied everywhere on the page, not only to child components) or use ::ng-deep to selectively disable view encapsulation for a certain ruleset. You may find the last part of this SO answer helpful.
Be aware that styling component internals may break in the future release if internal implementation of the component changes.
dhruveonmars
Describe the problem
After upgrading to 0.7.x and Angular 10, font awesome now uses
<fa-icon [icon]="['fas', 'sun']" size="sm"></fa-icon>however, with this, the only way to have styles applied to the svg icons is to set ViewEncapsulation.None to the parent component that the font awesome icon is inside.What did you expect?
I would have expected the styles to apply to the icons as they previously used to when it used to be <i class="fa fas..."
Not sure if this is related to issues #18, #48 or #96 but was hoping to see if there was a way to make it work without ViewEncapsulation.None