Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success.

<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"/>

Imported the icons as usual

import InsertCommentIcon from "@material-ui/icons/InsertComment";
import DraftsIcon from "@material-ui/icons/Drafts";
import InboxIcon from "@material-ui/icons/Inbox";

and continued for all icons.

However, despite following the import steps correctly, the icons remain invisible in the sidebar. Any ideas on what could be causing this issue and how to resolve it?

javascriptcssreactjsmaterial-uistyled-components

Answer №1

It appears that there may be an issue with your current imports, consider using the following:

import AddCircleIcon from '@mui/icons-material/AddCircle';
import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
import MarkEmailUnreadIcon from '@mui/icons-material/MarkEmailUnread';

and so forth ...

Just to double-check, ensure that you have properly installed MUI and Icons:

npm install @mui/material

as well as

npm install @mui/icons-material

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top Choice for MongoDB Integrated JS Framework for Loading Image Gallery Asynchronously

Recently, I've been exploring the idea of loading multiple galleries simultaneously. While working in MeteorJS with blaze templates, I've encountered some challenges with the methods I'm using. My data is stored in various MongoDB collectio ...

reactjsmeteormeteor-blaze

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

The functionality of the "Slots" prop has no impact when used on the material-ui Slider component

Trying to understand the purpose of the "slots" prop in relation to customizing how inner components like track and thumb are rendered within the Slider component. A basic example of rendering a Slider component is shown below const marks = [ { value: 0 ...

javascriptreactjswebmaterial-ui

The spacing between elements is too wide, preventing me from adjusting the image upwards

Currently, I am working on designing a screen layout for my app, and no matter what I do, I am unable to successfully align all the elements as intended. Can anyone guide me on where I might be going wrong? Column( modifier = Modifier, verticalArra ...

androidkotlinmaterial-ui

Angular is showing an error indicating that the property "name" is not found on an empty object

After thorough checking, I have confirmed that the property does exist with the correct key. However, it is returning an error message stating name is not a property of {}. I attempted to assign this object to an interface along with its properties but enc ...

javascriptangulartypescript

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Currently studying the Material UI documentation, I came across this statement: It is noted in the example above that we used: import RaisedButton from 'material-ui/RaisedButton'; instead of import {RaisedButton} from 'material-ui&apo ...

javascriptreactjstypescriptecmascript-6material-ui

Utilize duplicate named CSS grid rows as a reference

Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process. ...

htmlcsscss-grid

Converting lists to JSON format in a C# web form

Utilizing JSON.stringify, I have implemented textbox autocomplete for a web-form that suggests city names based on user input. The goal is to retrieve relevant city names from the database and display them as suggestions in the autocomplete feature after t ...

javascriptc#jqueryasp.netjson

Inherit React Material UI component type with TypeScript in version 5

Is there a way to extend MUI component type with additional props while minimizing imports and without specifying types for the props, only for the component itself? I also need the component to be able to accept render component prop types like Button< ...

reactjsmaterial-uireact-componentreact-typescript

Encountering a crash issue with JMeter's Selenium Sampler while attempting to click on a button with the Phantom

After building a JMeter Project, I have been utilizing the WebDriver Sampler (Selenium) to monitor response times during interactions with a particular feature on a webpage. To test my project, I have experimented with both Firefox and Chrome Driver confi ...

javascriptselenium-webdriverjmeterphantomjs

Tips on dividing and recycling mongodb connection in Node.js

I am currently troubleshooting the connection to MongoDB using Node.js. The code I have in a file named mongodb.js is as follows: const mongoClient = require('mongodb').MongoClient; const env = process.env.NODE_ENV || 'development'; co ...

javascriptnode.jsmongodbexpress

Dynamic visual content (map)

I'm currently working on creating an interactive image for my website where clicking on points A, B, C, ... N will reveal bubbles with images and text inside them. Would anyone be able to provide guidance on how to achieve this? Or direct me to resou ...

javascripthtmlcss

Using JavaScript and the Firefox browser, learn how to easily highlight an element with Selenium-WebDriver

I am struggling with creating a valid function to highlight specific elements on a webpage. As a beginner in coding, I suspect that the issue may either be related to my environment setup or a lack of knowledge about JavaScript/Selenium features. I am wri ...

javascriptnode.jsfirefoxselenium-webdriverhighlight

Is it still beneficial to incorporate image sprites in the design of a mobile web app?

As I work on developing a mobile web app, I find myself debating whether to use individual images or stick with image sprites similar to what I do for my desktop site. My main concern is the potential increase in file size from consolidating all the images ...

htmlcssmobile

Text hidden within the image, each line concealing a separate message

I am having an issue where my image is overlaying the text. I would like the text to wrap around the image and for any hidden text to appear on a different line. How can this be achieved? Here is the CSS code I am using: div.relative { position: relati ...

htmlcss

Uncovering the unique properties of custom Items in MUI v5 - RichTreeView: A Step-by-Step Guide

Can custom item properties received asynchronously with MUI - RichTreeView be exposed inside a custom treeItem? For instance, how can the customProperty1 and customProperty2 be accessed within the CustomTreeItem? The console.log to props only shows defaul ...

javascriptmaterial-uitreeview

Configuring Stylelint in a NextJS project using Emotionjs

I recently encountered an issue while trying to integrate Stylelint into a new NextJS Typescript project with EmotionJS. Many rules were not working in my styles files, and the only error I could identify was Unknown word CssSyntaxError. This particular U ...

reactjstypescriptnext.jsstylelintemotion-js

Creating personalized validation for an AJAX popup in the MVC framework

In my MVC project, I am trying to implement AJAX popup with custom validation. I have created a CustomValidator class and overridden the IsValid() method. However, I am facing an issue where the custom validations are not rendering correctly within the pop ...

javascriptjqueryajaxasp.net-mvcvalidation

Encountering difficulties retrieving records using fetch in Next.js

Recently, I have developed an API for blogs using the code snippet below: const fs = require('fs'); export default async function handler(req, res) { let blogs = []; try { let files= fs.readdirSync('blogdata'); files ...

reactjsnext.js

Expanding the size of the number input in Twitter Bootstrap to accommodate changing content dimensions

I have a numeric input field that I want to customize in terms of width. I need the field to start with a minimum width so that -1, the default value, fits nicely inside. As the value changes, whether decreasing to -100 or increasing to -1,000 and beyond ...

javascriptjquerytwitter-bootstrap