Is there a simple way to get a button with an icon on top?

[pmcelhaney]

Shoelace has prefix and suffix icons in a button.

Is there a simple way to style the button so the "prefix" is above the text rather than to the left of it?

My gut tells me that it's technically possible if I torture the CSS enough, but not advisable.

[jaredcwhite]

Looks like you can set the ::part(base) to flex-direction: column and height: auto and then you'll just need to fiddle around with padding and alignment for the prefix part, etc.

[claviska]

Jared’s answer is valid, but another approach is to not use the prefix at all.

https://codepen.io/claviska/pen/yLvZpLP?editors=1000