frontAnswerer/lib/assets/icons/ContactFormIcon/EmailIcon.tsx

import { Box } from "@mui/material";

interface Props {
  color: string;
  backgroundColor: string;
}

export default function EmailIcon({ color, backgroundColor }: Props) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "58px",
        width: "45px",
        backgroundColor: { backgroundColor },
        borderBottomLeftRadius: "12px",
        borderTopLeftRadius: "12px",
      }}
    >
      <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="1" y="3" width="15" height="12" rx="3" stroke="#9A9AAF" strokeWidth="1.5" />
        <path
          d="M4 6.75L7.3 9.225C8.01111 9.75833 8.98889 9.75833 9.7 9.225L13 6.75"
          stroke="#9A9AAF"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </Box>
  );
}