Vector fill color (nested component) doesn't change back to the one specified in the default variant after interaction

Interactive Components
12

Pay attention to the order of the layers. For the color override to work correctly, you need to adhere to the following structure: Union > Icon Instance > Vector.

  • Union — to color override;
  • Icon Instance — to swap icons.

I edited your file and now it works as expected. You may notice that I used a structure like this: .base-icon > Union > Icon Instance > Vector.
This is done to keep the icon at its original size. If you don’t use .base-icon, the icon will be resized due to Union.

Design file:

Prototype:

4 Likes