Skip to content
Advertisement

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)

JavaScript

./SidebarOption.comp.js (Where im creating the icon prop)

JavaScript

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.

Advertisement