Classes attribute binding does not import module styles

[Askedalen]

Describe the problem

The [classes] attribute only applies classes in the global style document, and not styles in the module where the icon is used.

What did you expect?

The attribute should import classes from both global style sheets and local style sheets for the module.

Reproducible test case

Link to StackBlitz showing the issue: https://stackblitz.com/edit/angular-ivy-qhssa1?file=src/app/app.component.html

[devoto13]

That's a valid point, but I don't think we can do much about it besides documenting it better.

The thing is that this input sets classes inside the fa-icon component on the svg element (which is sometimes needed), but you define them in your component's stylesheet. Your component uses a view encapsulation feature to prevent its styles from leaking into other components of the app (in this case fa-icon component). So it really works as expected from the Angular perspective.

If you just want to add the margin, use regular class. If you need to specifically style svg icon element you need to define the style without view encapsulation and there are several ways to do it:

• use global styles (which by definition don't support view encapsulation)
• disable view encapsulation for the component where you use the fa-icon
• use ::ng-deep to disable view encapsulation for a particular declaration
• use styles input instead

See https://stackblitz.com/edit/angular-ivy-taxgb4?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

PS Thinking about it, maybe we should even remove classes input to avoid confusion 🤔

[Askedalen]

Thank you for clarifying!

I ended up using class, which works fine in my case.

I suppose there are some cases where this behaviour of classes is useful, but it was a bit confusing.

[devoto13]

I'll re-open this issue as I want to write some documentation around this when I've got some time :)