I came across this problem yesterday and i am not sure if there is a solution out there other than just re-point the icon in the active state to the icon it was before. But here it goes
In our Design System we have 2 icon states Outline and Filled. The filled icon is only used for select active states on a few components.
One of these components is List, we can have an icon to the left of the text and when it is then “selected” as an active state the icon swaps to a filled icon and the state of the background also changes. See example below.
The problem is since these are 2 different icon sets the icon that has been set from the designer in the list will not swap to the filled icon when the active state is set. I assume this is due to our outlines are named “home” for outline and “home_filled” for filled icons.
Has anyone come across a problem like this before and came up with a solution?
Did you find any workaround for this issue?
I’m also in a situation where I have to swap inside navigation between states: active and default/normal. But the icon keeps resetting itself to the original one when swapping.
To union only one icon, i had to duplicate it and then union them both together, then i went inside that union and deleted the duplicated icon leaving only one.
Then i made sure to rename the layer to “Base” after i created the variant.
I have a similar issue but it’s not just on the icon. I have nested variants that have specific styles for each state and an icon inside the nested variant. Not sure how to overcome my situation
This sounds like the issue I have too. My 5 navigation buttons each have an icon with multiple colours applied so the ideal situation is for me to create a variant with the 5 icon presets in so I can switch the icon in the parent nav button variant. However I can’t get Figma to persist the nested variant switch when I change the button state - it resets to the initial default icon. It works if instead of an icon variant I use a generic icon component and apply the colours to each button state but that only works if the icons have a single colour applied to them.
