Create a _base button component with a label and a placeholder icon component with #000 fill.
Apply the instance swap property on the placeholder icon component.
Create a button component wrapping the _base button component, make this the “default” variant.
Add a hover variant of this button and link it up with “while hovering”.
Change the icon fill in the default and hover states to #f00.
Create an instance of the button component.
Use instance swap to swap in the icon of step 1.
Notice the icon is now red.
Play the prototype and hover.
Notice the icon in the hover state is now black (reverts to original icon color).
In the prototype, while hovering it should remain red.
This only happens when using the instance swap property. When the instance swap property is removed and the icon is replaced “manually”, the color override persists.
The workaround for now is to avoid the instance swap property for component interactions dealing with color overrides and to just manually swap icons.
This has been happening for me as well. In the workspace view, variants all retain their correct colour overrides when switching between component variants. But in prototype view, they will revert to their default #000000 colour when switching variants.
I have triple checked that all my component variants and all my Icons have the same layer structures as well layer names, but the issue persists. Considering that the component in question is one that contains nearly 100 variants, I would hope the solution is not to simply remake all of them.
I do believe this is a bug and not a layer structure issue because I was rigorously following all the recommended methods to ensure this issue does not occur.