Icon fill and color are lost when swapping icons in component variants

Description

We are experiencing an issue with icons inside components when switching between states.

Our use case is an icon that (example):

• In the default state is not filled and uses color #FFFFFF.
• In the selected state becomes filled and uses color #000000.

When creating the component, we initially use a specific default icon, and the color and fill behavior works correctly across the variants.

However, as soon as we swap/change the icon to a different icon, the selected-state properties are lost:

• The icon no longer becomes filled.
• The icon color is no longer changed to the state color.

We have also tried alternative approaches, such as applying a variable that forces the icon to be filled. With this approach, the fill behavior works, but the color property is lost when changing the icon.

Expected behavior

When swapping the icon within the component, the icon should preserve the properties defined by the component variant:

• State X → unfilled + color X
• State Y → filled + color Y

These properties should be applied to whichever icon is selected/swapped into the component.

Actual behavior

When the icon is swapped:

• The state fill property is lost.
• The state color is lost or not applied correctly.
• Using a variable to control the fill fixes the fill state but causes the color to be lost.

Steps to reproduce

1. Create a component with an icon.
2. Define a default variant where the icon is unfilled and uses color X.
3. Create a selected variant where the icon is filled and uses color Y.
4. Swap the icon for a different icon.
5. Switch between the default and selected variants.
6. Observe that the fill and/or color properties are no longer inherited as expected.

Question

Is this expected behavior when swapping nested icon instances, or is there a recommended way to structure the component/variables so that the fill and color properties are preserved independently of which icon is swapped in?