Así que estoy tratando de usar íconos mui entre componentes.

Estoy usando el componente <Icon /> pero hay dos problemas con eso:

1. Solo se representa la mitad del icono.
2. No puedo diseñar el ícono en el componente, sino que tengo que diseñarlo donde estoy usando el componente

src/components/sidebar/Sidebar.comp.js (Donde estoy usando el componente de icono)

 import React from "react"; import twitterLogo from "../../images/twitter_logo.png"; import { Home } from "@mui/icons-material"; import { Link } from "react-router-dom"; import SidebarOption from "./SidebarOption.comp"; function Sidebar() { return ( <div className="px-4 py-2 "> <div className="rounded-full transition-color cursor-pointer hover:bg-blue-100 px-2 py-3 w-max"> <Link to="/home"> <img src={twitterLogo} alt="twitter_logo" className="h-7" /> </Link> </div> <SidebarOption MuiIcon={<Home style={{ fontSize: "2rem" }} />} path="/home" /> </div> ); } export default Sidebar;

./SidebarOption.comp.js (Donde estoy creando el accesorio del icono)

 import React from "react"; import { Icon } from "@mui/material"; import { Link } from "react-router-dom"; function SidebarOptions({ MuiIcon, path }) { return ( <div className="rounded-full transition-color cursor-pointer hover:bg-gray-300 p-[7px] w-max h-max"> <Link to={path}> <Icon>{MuiIcon}</Icon> </Link> </div> ); } export default SidebarOptions;

¡Gracias por adelantado!