how to customize material ui icon by adding plus

Question

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?

Answer 1

i think this is the icon you are looking for

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

Answer 2

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

Answer 3

Here is a solution using styled components:

import * as React from "react";
import { Box } from "@material-ui/core/";
import { CameraAlt } from "@material-ui/icons";
import AddIcon from "@material-ui/icons/Add";
import styled from "styled-components";

const IconContainer = styled(Box)`
  background-color: red;
  position: absolute;
`;

const PlusIconBack = styled(AddIcon)`
  position: absolute;
  right: -8px;
  bottom: -1px;
  color: black;
  font-size: 21px;
  stroke-width: 3;
  stroke: black;
`;

const PlusIconFront = styled(AddIcon)`
  position: absolute;
  right: -7px;
  bottom: 0;
  color: white;
  font-size: 19px;
`;

function Demo() {
  return (        
    <IconContainer>
      <CameraAlt />
      <PlusIconBack />
      <PlusIconFront />
    </IconContainer>
  );
}

export default Demo;

The point of it, is to use a container giving it position relative , add your main icon, then add your plus icons with position absolute and place them where you want using left/right top/bottom. Sandbox: sandbox