Material UI: How to vertically centre align an icon button?

December 5, 2021

I have this tsx piece of code to show a text box and an icon button to add something:

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

The output is like this:

As you can see, the "+" icon is not vertically aligned with middle of the textbox. I tried adding padding to the button but it ruins the circle that is shown when mouse is hovering and makes it like an oval:

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete" style={{paddingTop: 19}}>
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

How can I say "all of these elements should be aligned"?

>Solution :

You can easily use Box component and flexbox.

<Box
  display="flex"
  alignItems="center"
>
  <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>
</Box>

It supports all system properties.