0
228
Vistashow to customize material ui icon by adding plus
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 ?
2 Respuestas
Responde la pregunta0
i think this is the icon you are looking for
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
0
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