Button component with swappable icons

#1

Hey guys, I am exploring Axure 10 component and I am loving it. What I want to achieve is to have a button component with an icon component embedded in it.

So something like this
image

But as I use this component I must be able to swap out the default icon with any icon (which can be perhaps a component view for each icon, maybe) in the overrides section.

I tried multiple ways, using component views, dynamic panels, etc, but was not able to get it. I think this is doable but I am not able to cut it thru. So here I am asking for some help and see if there is any way to get it working.

#2

The easiest way to do it is to use the Image widget for your icon instead of a Shape. You can then choose to override the image in the component the same way you can text. This works fine so long as you don’t need to change the color of the icon for something like a hover or selected state.

A more flexible way would be to use an icon font. You can override the icon’s text just as you would on any other widget, but you have the full range of options as you do with regular text (change color on hover, edit as rich text, even use it for logic to detect what icon it is). Just remember to embed the icon font as part of your publishing process.