Reputation: 101
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
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
Reputation: 880
Add this line to your index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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