Hey @tank666, thanks for sharing the file. It really helped me realize how color overrides can consistently work. However, there seems to be an issue with stroke properly swapping.
I tried applying it to our design system but I’ve stumbled upon an issue with the stroke not scaling back properly when you change the icon and swap back from Button Large to Medium, and then Small.
What’s peculiar is that stroke swaps properly from Small to Large, and from Large to Medium, but doesn’t go back to 1pt when swapping to Small.
I fixed this by overriding the stroke weight in the button variants. That is, I selected the icon vector in the Button Components Set, changed the stroke weight from 1px to 2px and back. I did this for all button variants, but maybe it only needed to be done for the Small Button.
Feel free to duplicate my file again to make sure it works as expected:
Hello Team,
I followed all the received solutions in this thread but so far no luck… Pls find below screen capture.
I have a .base button
I created variants with the help of .base button, those are enabled, hover, active and disabled.
Right n Left icon color working fine with Enabled but
Once I changed the state to disabled or active, icon color reverts to it’s original
Looking for support to maintain the same color irrespective of state change.
This technique works, I used it today to resolve a range of components using icons that were misfiring across all of our team’s prototypes. @tank666 thank you for sharing!
