Add space between IconButton inside actionIcons in MUI ImageListItemBar - reactjs

Question

I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>

Answer 1

You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.