Angular 8 SCSS class names not applied to child SVG's of fa-icon

[richbrill]

Describe the problem

Trying to use some custom SCSS inside an existing Angular 8.2.11 component to style the child svg that is generated by the fa-icon component in @fortawesome/angular-fontawesome 0.5.0

.parent {
  fa-icon {
    font-size: 1.5rem;

      svg {
        transform: rotate(45deg);
      }
  }
}

What did you expect?

The class generated by SCSS to be applied to thesvg generated by font-awesome (understandably, this is a bit of a chicken and egg scenario, unless it depends on the order in which Angular Webpack processes the scss and compiles components?

[devoto13]

Please read about view encapsulation first and check out https://github.com/FortAwesome/angular-fontawesome/issues/272#issuecomment-671208280 for the possible workarounds.

[richbrill]

Thanks @devoto13, I didn't want to use view encapsulation Shadow Dom mode as it wasn't necessarily supported on all browsers but thought that font awesome might handle it out of the box without having to put my styles in a global stylesheet. Thanks again

[devoto13]

Note that you can also use ::ng-deep selector to make only certain styles break the boundaries of the emulated view encapsulation. E.g.

.parent {
  fa-icon {
    font-size: 1.5rem;

      ::ng-deep svg {
        transform: rotate(45deg);
      }
  }
}

[richbrill]

Ah, ok, I wasn't aware of that particular use case, thanks!