Use mui icons between components in react

So I am trying to use mui icons between components.

I am using the <Icon /> component but there are two problems with that:

1. Only half of the icon is rendered.
2. I cannot style the icon in the component but instead have to style it where im using the component

src/components/sidebar/Sidebar.comp.js (Where im using the icon component)

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 (Where im creating the icon prop)

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;

Thanks in advance!

Answer

You are using a combination of two APIs here. <Icon /> component is meant to be used for custom font icons, while the <Home /> icon (among others) is already ready-to-use as it is. Remove the wrapping <Icon /> component from SidebarOptions component and it should work.