Swapping variant states when you have a different icon for the active state

Chip_Carroll · February 9, 2021, 1:50pm

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?

Remus_Baltariu · February 23, 2021, 1:18pm

Hi,

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.

I’m attaching some screenshots:

layers naming and structure
variants
screen-recording

Chip_Carroll · February 23, 2021, 1:31pm

Yeah i did end up finding a solution. Its sort of hacky but involves renaming and using the union tool.

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.

Ben_Ho · February 23, 2021, 9:55pm

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