Icon display issue when adding custom css

[rachid822]

Describe the bug

I have icone cds-icon shape="circle-arrow" status="success" class="nav-icon-favorit" solid direction="down">
css class nav-icon-favorit:
.nav-icon-favorit:hover{
cursor: pointer;
transform: scale(1.5);
color:#FFE433;
}

When the icon is hovered, the direction become "up" and not remain "down".

A clear and concise description of what the bug is, and the conditions when it occurs.
This happen when adding css transform: scale(1.5);

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v15.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
_ie: Angular 15

Device:

• Type: [e.g. MacBook]
• OS: [windows]
• Browser [edge]
• Version [latest]

Additional notes

Add any other notes about the problem here.

[kevinbuhmann]

You are overriding the transform rule.