Component properties and variants don't work together?

I found some people having similar problems, but i feel like i tried everything that was suggested in those topics and i can’t get it to work.

I have a navigation item with some elements:

  • Label
  • Icon
  • Notification badge

I want this item also to have a active/non-active state.

Now everything seems to go pretty well, untill i change the icon, then start switching between active/non-active. The icon now keeps the active state no matter what.

Here is a file:

Anyone has an idea how to fix this in my structure?

To preserve color overrides, use the boolean union operation trick. See an example here: Vector fill color (nested component) doesn't change back to the one specified in the default variant after interaction - #12 by tank666.

Thank you tank666. Got it working now, still was a little confused after your example, but got it now.

These links also helped me understand it: