Nested component not working properly after swapping

[Zheng_Lu]

Hi everyone, I have a question that needs your help, please see the problem description below. Thanks and I really appreciate your help!

Context:
The Icon container is the first component with size variant and instance swap property, while the Icon button is the second component that refers to the Icon container component with additional properties.

Problem:
There seems to be an issue with the icon button instance as it is not retaining the correct color after swapping the instance. Although it worked initially in some cases, after making a few changes such as 1. swapping the icon, 2. changing the size, 3. type, and 4. toggling between different states, it stopped functioning properly. Please see the example below for reference:

Figma file you can find it here:

**Notes: **
The icon layers have been cleaned up.(same layer name, structure and setup)

[Raphael_M]

Hi, Zheng.

The swap instance should work properly if you have the same component names.

One solution is combining all your icon components into one component with variant.

Here is the result using variant.

Read this article in Figma for more info about preserve overrides: https://help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances#:~:text=copy%20the%20overrides.-,Preserve%20overrides,Figma%20will%20also%20check%20if%20the%20text%20layer's%20hierarchy%20is%20similar.,-Push%20overrides%20to

[Zheng_Lu]

Hi Raphael,
Thank you so much for your help! After cleaning up the icon name and structure as your suggested, the problem still persists. Please see the updated file here:

I also tried your suggested combining icon components into one with variant, the problem still persists. It looks like a bug to me. see here for the icon variant file

[Raphael_M]

Hi, Zheng Lu.

Is it possible for you to send a video of it? It works fine on me using your file.

[Zheng_Lu]

Hi Raphael, see the video recording below:
The step I went through:

1. swapped the icon
2. changed the size
3. change to primary selected ->not working, icon color should be white
4. change to secondary selected ->not working, icon color should be white
5. change to tertiary, both selected, hover, and disabled colors were not correct.
   

[Raphael_M]

Hi, Zheng.

I see. I think this is indeed a bug and from what I see it has something to do with the complexity of your component. I’m not entirely sure if Figma can’t handle the logic behind your properties, but I think that seems to be case. I tried it using the same step you have, it works fine (size, color) until I changed from Primary → Secondary where it reverts back to icon/default.

Try to separate the Tertiary, Primary, and Secondary components to lessen the complexity of your component.

[Bart_K]

@Zheng_Lu I haven’t tried it myself yet, but I’ve seen people implementing workaround for coloring vector icons when they encounter problem similar to yours.

Instead of coloring icon vectors directly, they are using solid block object for color and applying icon’s vector as a mask for it.