Using material UI icons, I have a camera icon with an AddIcon connected to it. I want to replace the plus sign (AddIcon) with alphabet letters using 'materialdesignicons'. Is there a way to do this? For example, replacing the plus sign with the letter 'b' from 'materialdesignicons'.
Here is my code: codesandbox: https://codesandbox.io/s/svgiconssize-demo-material-ui-forked-yfs77g?file=/index.tsx:73-134
code:
import * as React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import AddIcon from "@mui/icons-material/Add";
import CameraAltOutlinedIcon from "@mui/icons-material/CameraAltOutlined";
export default function SvgIconsSize() {
return (
<Container sx={{ background: "black", height: "100vh" }}>
<Box // This is your container
sx={{
position: "relative",
display: "initial",
color: "black",
width: "50px",
height: "50px"
}}
>
<CameraAltOutlinedIcon sx={{ fontSize: 40, color: "white" }} />
<AddIcon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
fontSize: 22,
strokeWidth: "4",
stroke: "white"
}}
/>
<AddIcon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black",
fontSize: 22
}}
/>
</Box>
{/* UNTIL HERE */}
</Container>
);
}I want to use: import { mdiAlphaB } from '@mdi/js';
Following this tutorial:
However, all I get is a rotating 'b'. I want it to look like this: https://i.sstatic.net/Lxu2b.png Instead of the plus sign, I want the letter 'b'. Any suggestions?