how to customize material ui icon by adding plus-CodePudding

I'm using material ui icons, is there any way to add plus to icons ?

This is my icon :

import ApartmentIcon from '@mui/icons-material/Apartment';

and that icon should have plus to it like here:

I have been trying to find a way but did not find anything, these are icons i want plus to them:' CameraAlt, Apartment, Web, Assessment, Description,', any suggestions ?

CodePudding user response：

i think this is the icon you are looking for

import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';

CodePudding user response：

Using sx property here is what you need.

<Box sx={{ background: "black" }}>
  <Box sx={{ position: "relative", display: "inline", color: "white" }}>
    <CameraAltOutlinedIcon sx={{ fontSize: 40 }} />
    <AddIcon
      sx={{
        position: "absolute",
        right: "-5px",
        bottom: "2px",
        color: "black",
        fontSize: 22,
        strokeWidth: "6",
        stroke: "black"
      }}
    />
    <AddIcon
      sx={{
        position: "absolute",
        right: "-6px",
        bottom: "1px",
        color: "white",
        fontSize: 22
      }}
    />
  </Box>
</Box>

I had to use two 'plus' svg AddIcons one inside the other with some stroke to the one on the back to act like a frame for the one on the front and have a better looking result. The only thing you need to do is adjust the left/right attributes depending the main icon you are using and the colors to match your background.

Here also is a working codepen