Button - Labeled Icon - Darken background rotates with icon

[flppv]

Bug Report

Steps

Create a Button with Labeled Icon, and make Labeled Icon rotating with loading prop:

<Button
  labelPosition="right"
  size="huge"
  icon
>
  Test
  <Icon name="circle notch" loading />
</Button>

Expected Result

I expect background to stay static and only Icon content to be rotated

Actual Result

Background rotates together with Icon

Version

2.0.0

Testcase

https://codesandbox.io/s/elated-framework-kgepn?file=/src/App.js

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[flppv]

I think I can fix it by myself a bit later tonight, just want to get a confirmation it is considered as a bug, not a feature.
IMO, need to move rotate animation from <i> element to it's child :before

[brianespinosa]

@flppv Looks like this is definitely an issue... but the CSS that is targeting these elements is not part of SUIR. You can open an issue in the parent SUI project for this. Or you can write some global CSS that overrides those defaults to move it.