CODEWITHSUNDEEP
reactjsmaterial-ui
Pushpinder Singh Grewal
Pushpinder Singh Grewal

Reputation: 101

IconButton is not displayed on screen

I have just started to learn React.js and material-ui. I was using this to display an icon on screen. However the icon is not displayed on the screen and the screen appears to be blank.

Here is my code:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {IconButtonExampleSimple} from './IconButtonExampleSimple.js';


 class App extends  React.Component{

 render()
 {
   return(
         <MuiThemeProvider>
         <IconButtonExampleSimple />
         </MuiThemeProvider>
         );
  }
 }




    ReactDOM.render(
                    <App/>,
                    document.getElementById('root')
                    );

IconButtonExampleSimple.js

  import React from 'react';
  import IconButton from 'material-ui/IconButton';
   export class IconButtonExampleSimple extends React.Component{

   render ()
  {
   return (<div>
             <IconButton iconClassName="muidocs-icon-custom-github" />
             <IconButton iconClassName="muidocs-icon-custom-github" 
             disabled={true} />
           </div>
          );
   }
   }

Upvotes: 1

Views: 1223

Answers (2)

Dipesh Mishra
Dipesh Mishra

Reputation: 1

I got this same issue ... Its mostly due to vite. use npx create-react-app and note vite.

Vite does not allow dynamic import .Related to rollup(Not yet fixed) They treat this as a feature.[lol]

Happy Hacking!

Upvotes: 0

Antoine
Antoine

Reputation: 880

Add this line to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icon‌​s" rel="stylesheet">

You are including the Material-UI part of the icon buttons but those are refering to google's Material-Icons so you must link it in your index file.

Upvotes: 1

Related Questions