Button design: Icon and text on button

Hi there,

I am new to axure and need some advice. I like the function that the button text is already on the button and the padding can be set. But how do I add an icon to the button text? The icon has a different font size than the text so it can’t be one line of text, that would be easy. If I set the icon font manually I won’t see the distance between the button text and the icon font. And if I resize the button, the icon won’t stay next to the text.

I hope you understand my problem.


Yes, you can do all this with multiple widgets in a group or dynamic panel. It takes some experimentation and playing around with the Style settings, especially alignment, padding, “Fit to Width”/“Fit to Height”.

If your icons are actually graphic fonts, like Wingdings or Font Awesome, then you can use one widget and set the text to various fonts, sizes, colors, etc. If you need to change the text dynamically (in the interaction code) and set different font properties then you can do that via the Set Text action and specify “rich text” instead of the default “text” in the SET TO property.

Here is a quick demo:
button styling.rp (87.5 KB)

Thanks a lot. I will try.