How do you align an image above the text in a button?

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By JayFi

The Button has an “Align” property that allows for Left, Center, and Right, and an “Icon Align” property that allows for Left, Center, and Right. How do you create a button where the picture/icon is above the text, i.e.:

 .---------.
|    **    |
|          |
|   text   |
`----------'

Is this possible?

2
:bust_in_silhouette: Reply From: meowyih

I believe you need to use TextureButton in this case. Just create a TextureButton and assign different textures in the inspector. For the text base texture such as your example, you might need to use viewport texture. Like this: Imgur: The magic of the Internet

3
:bust_in_silhouette: Reply From: AlexTheRegent

Yes, this is possible. You just need to create Button, and then add TextureRect and Label as childs of this button. You can also use MarginContainer and VBoxContainer to make responsive design.
Note that you need to set TextureRect and Label property mouse > filter to Ignore to make sure they propagate GUI events to button.