I’m building a design system, and I’m having an issue with icons in my button. Our buttons can include icons, which for most states are outlined, however on pressed/active states, we want the button to switch to the filled version of the icon. Imagine a bookmark button, or favourite button, or a button that opens a filter-bar, etc.
Our icons are build as separate symbols, with size and outline/fill as their variant. The icons are unified, and all named “icon”, to retain colour-overrides when swapping icons in any insert. Which works fine.
Our buttons are built with the option to have icons to the left, right, none or only.
I am able to change icons after inserting the button, and retain the new icon for all state-changes, with exception of the active/pressed state, where I want the icon to change to its filled variant. What happens now, is that the inserted button returns to the default icon when pressed. Which is super frustrating and confusing in a prototype.
What happens IRL
Is there any way to solve this? I don’t think it’s an uncommon pattern to switch from outlined to fill icon on an pressed or selected state