Add space between IconButton inside actionIcons in MUI ImageListItemBar

Viewed 13

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>
0 Answers
Related