Wrapping button text, when icon is aligned next to the text

[Richard_Stelmach]

I need the icon and text to be center aligned, together. So as the text expands, the icon stays next to the text, rather than pinned to the left or right of the button.

This works.

But, if the text length exceeds the length of the button, it doesn’t wrap, it just keeps going.

If I make the text wrap, by making the text fill the container, the icon is then left aligned to the button, as below, but this isn’t what I want:

What I want is this:

But in the above example, the first button as ‘hug’ on the text, the second it has ‘fill’. Whereas I want to create one component which works in both cases, without needing to update the text fill properties on the instance.

[Josh_Kirkley]

Has anyone found a solution for this?

[RizePoint_Product]

Oooh, a tricky one. I don’t think you can do this without a workaround. What I’d probably do is have two versions of the text + icon nested in the button frame–one set to fill, one set to hug–then use component properties to keep the text and icon in sync on both and to show/hide the appropriate one depending on the button context.