I don’t understand which step I did it wrong. after swapping the icon, then the color didn’t follow the rule of boolean component anymore. Is that a bug?
Yes it probably is a bug and the unwanted behavior occurs because of the initial icon color.
Try to set the color of your original Icon Variants to something else (for example red) instead of gray/600 and override it in your button component.
Then it should change back to gray/600 after hovering.
Figma kinda seems to mishandle icon color changes when the original icon and the default state of your component’s icon match in color.
Also color change bugs occur when mixing stroke based and fill based icons, so it is always good to convert the strokes of icons, but make sure you keep an intact backup in case you want to change the shape.
Thank you!! it works!!