How to make texts appear below icons in Buttons (Material UI)-CodePudding

Basically, this is my Button right now

I want to make the Dummy Button text to appear below the icon, how do I do that?
Here is my code

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
<span>Dummy Button</span>
</Button>

Styles.js

dummyButton: {
    backgroundColor: 'green',
  },

CodePudding user response：

I think you can put your image tag in another span and change its display to block.

Try this:

<Button className={classes.dummyButton}>
 <span className={classes.mySpan}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
</span>
<div>Dummy Button</div>
</Button>

and your class styles should be like this:

.mySpan {
       display: 'block'
    }

CodePudding user response：

try To add A <br /> tag between image and div. This what I meant. This will help you https://codepen.io/ash_000001/pen/OJOQaGp?editors=1100

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />

<div>Dummy Button</div>
</Button>
Styles.js

dummyButton: {
    backgroundColor: 'green',
 
  },

CodePudding user response：

You want to set display: 'flex' and flexDirection: 'column' for column-direction elements placement inside your button:

dummyButton: {
    backgroundColor: 'green',
    display: 'flex',
    flexDirection: 'column'
  },

CodePudding user response：

It is semantically "incorrect" to use a div in a button. You should use the span element instead.

With that being said, the Button component uses flexbox to control the layout/alignment of content. To align the content vertically (so the icon is above the text), you can simply change the flex-direction to column.

style.js

dummyButton: {
    backgroundColor: 'green',
    flexDirection: 'column'
  },

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
   <span>Dummy Button</span>
</Button>