I am trying to make a sidebar component and import the different icons to make the UI, but they aren't rendering on the screen. I tried other solutions mentioned here, didn't quite work.
<SidebarOption Icon = {InsertCommentIcon} title ="Threads"/>
<SidebarOption Icon = {InboxIcon} title ="Mentions & Reactions"/>
<SidebarOption Icon = {DraftsIcon} title ="Saved items"/>
<SidebarOption Icon = {BookmarkBorderIcon} title ="Channel browser"/>
<SidebarOption Icon = {PeopleAltIcon} title ="People & user groups"/>
<SidebarOption Icon = {AppsIcon} title ="Apps"/>
<SidebarOption Icon = {FileCopyIcon} title ="File browser"/>
<SidebarOption Icon = {ExpandLessIcon} title ="Show less"/>
<SidebarOption Icon = {ExpandMoreIcon} title ="Show more"/>
did the import as usual
import InsertCommentIcon from "@material-ui/icons/InsertComment";
import DraftsIcon from "@material-ui/icons/Drafts";
import InboxIcon from "@material-ui/icons/Inbox";
and so forth for all icons.
But the icons aren't visible on the sidebar. What do you think might be the issue and what should I fix?
your imports are wrong, try these
import InsertCommentIcon from '@mui/icons-material/InsertComment';
import DraftsIcon from '@mui/icons-material/Drafts';
import InboxIcon from '@mui/icons-material/Inbox';
and so on ...
also jsut to be sure, make sure that you installed MUI and Icons correclty:
npm install @mui/material
and
npm install @mui/icons-material