Align icon and text in button

Question

Dear Support,

Is it possible to align an icon to the text in a button, i.e. specify a fixed distance between the icon and the text?

 

With kind regards,

Karijn Wessing

Answer 1

Hello Karijn,

I assume you refer to the Push Button widget. In such case, if the icon size does not change (it is always fixed), you could configure the Icon to be e.g left aligned within the button and the Label to appear left aligned too with an additional margin. See the sections:

Configure how to arrange the Push Button's icon image

Configure how to arrange the Push Button's label text

If the size of the icon changes or you want the icon to be aligned at the end of the text, then this is not possible with the Push Button widget. In such case, you create your own Push Button component, ideally using the provided Push Button component template. This approach is more flexible. In fact it allows you to create any fancy Push Buttons. It requires, however, more understanding and implementing code in the Push Button template. See also the section  Component templates versus ready-to-use widgets.

I hope it helps you further.

Best regards

Paul Banach