Icon location on buttons (above)

Can I change the icon location/alignment on the buttons to “above” (instead of inline) . It seems to me that there is no such option directly (as with the icons in headline) but is it possible to do this with a css class?

I have the same issue, did you resolve it?

By default the button block offers an icon the locations left and right. The Headline block offers inline or above. The easiest way to style is to use the headline block and add a background colour and some padding rather than try to style the button block. This seems to be harder.

1 Like

Using the Headline is one possible solution.

To use the Button block use an the additional class on the button “stacked-icon” and then add this custom CSS:

/* Stack button icon */
.gb-button.stacked-icon {
flex-direction: column;

.gb-button.stacked-icon .gb-icon {
padding-bottom: 5px;

The solution was provided by Tom, not by me…
Give it a try. It worked with me.

1 Like

Both solutions worked perfectly fine. Thank you @joseboica and @BiancaNL