Material Icon giving blank screen in React , which works fine if we remove the icon

[Divesh-Kumar-Chordia]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1.npm i @mui/icons-material 2.npm install @mui/material @emotion/react @emotion/styled 3.npm install @mui/material @mui/styled-engine-sc styled-components 4.npm install @mui/icons-material 5.npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

6. then use it in the page

Current behavior 😯

blank screen , no error , in react terminal

Expected behavior 🤔

suppose to render the screen with icon on them

Context 🔦

` import React from 'react' import styled from 'styled-components' import img from '../img/logo.png'

const Container = styled.div flex: 1;/** 1:7 is the ratio */ background-color: #202020;/**menu color */ height:100vh;/** 100% vertical height*/ color: #ffff; font-size: 14px;

const Wrapper = styled.div` padding:18px 26px ;

const Img = styled.img height:25px; const Logo = styled.div display:flex; align-items:center; gap:5px; font-weight:bold; margin-bottom: 25px;

const Item =styled.div display:flex; align-items:center; gap:20px; cursor:pointer; padding:7.5px 0px; `

function Menu() { return (

YouTube Home Explore Subscription Library History Music Sports Gaming Movies News Live Settings Report Help Light Mode

) }

export default Menu `

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

`import React from 'react' import styled from 'styled-components' import img from '../img/logo.png'

const Container = styled.div flex: 1;/** 1:7 is the ratio */ background-color: #202020;/**menu color */ height:100vh;/** 100% vertical height*/ color: #ffff; font-size: 14px;

const Wrapper = styled.div` padding:18px 26px ;

const Img = styled.img height:25px; const Logo = styled.div display:flex; align-items:center; gap:5px; font-weight:bold; margin-bottom: 25px;

const Item =styled.div display:flex; align-items:center; gap:20px; cursor:pointer; padding:7.5px 0px; `

function Menu() { return (

YouTube Home Explore Subscription Library History Music Sports Gaming Movies News Live Settings Report Help Light Mode

) }

export default Menu `

[Divesh-Kumar-Chordia]

link to the repository : https://github.com/Divesh-Kumar-Chordia/YouTube-Clone

[Divesh-Kumar-Chordia]

page : ./src/components/Menu.jsx

[michaldudak]

Could you please provide a minimal reproduction or the exact steps to reproduce the problem in the repo you linked? I ran npm run start in the front-end-client directory and I do see content on the rendered page.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.