So I am trying to use mui icons between components.
I am using the <Icon />
component but there are two problems with that:
- Only half of the icon is rendered.
- 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)
JavaScript
x
25
25
1
import React from "react";
2
import twitterLogo from "../../images/twitter_logo.png";
3
4
import { Home } from "@mui/icons-material";
5
import { Link } from "react-router-dom";
6
import SidebarOption from "./SidebarOption.comp";
7
8
function Sidebar() {
9
return (
10
<div className="px-4 py-2 ">
11
<div className="rounded-full transition-color cursor-pointer hover:bg-blue-100 px-2 py-3 w-max">
12
<Link to="/home">
13
<img src={twitterLogo} alt="twitter_logo" className="h-7" />
14
</Link>
15
</div>
16
<SidebarOption
17
MuiIcon={<Home style={{ fontSize: "2rem" }} />}
18
path="/home"
19
/>
20
</div>
21
);
22
}
23
24
export default Sidebar;
25
./SidebarOption.comp.js (Where im creating the icon prop)
JavaScript
1
17
17
1
import React from "react";
2
3
import { Icon } from "@mui/material";
4
import { Link } from "react-router-dom";
5
6
function SidebarOptions({ MuiIcon, path }) {
7
return (
8
<div className="rounded-full transition-color cursor-pointer hover:bg-gray-300 p-[7px] w-max h-max">
9
<Link to={path}>
10
<Icon>{MuiIcon}</Icon>
11
</Link>
12
</div>
13
);
14
}
15
16
export default SidebarOptions;
17
Thanks in advance!
Advertisement
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.