Allow customizing cds-icon using CSS transform without losing rotation

[kepelrs]

Summary

cds-icon could be more flexible if the CSS transforms were applied to the svg child element instead of the host.

• What is the change? Move CSS transforms from the host into the svg element.
• Why should it go in Clarity? It would make cds-icon easier to customize in cases where it is nested further inside other libraries/components. It would be possible to change the transforms with just CSS and without losing the underlying rotation.
• Does this change impact existing behaviors? If so how? Yes. Any users with existing workarounds for this issue would have their icons further rotated unless they remove the workaround.

Use case

Current

If I have a caret pointing down, the HMTL looks like this:

<cds-icon shape="angle" direction="down"></cds-icon>

and I can see the following style being applied by the constructed stylesheet:

(source)

:host([direction="down"]) {
    transform: rotate(180deg);
}

This means that I will lose the transform: rotate(180deg); if I try to add any transformations like transform: translateY(10px);. It means I'll have to be mindful and use transform: rotate(180deg) translateY(10px); instead. And if it is a generic style for any cds-icon direction, I'll have to make extra adjustments for that as well.

Proposed

Maybe the current could be improved if cds-icon applied its transforms to the svg instead of the host.

:host([direction="down"]) {
	svg {
    		transform: rotate(180deg);
	}
}

This would leave the host cds-icon without any transforms, making it possible for users to add their own without worrying about overriding clarity's transforms (eg. downward rotation).