如何在material-ui中更改IconButton的设计？

Question

Material-ui has provided us with a default icon button. However, I would like to change the design of the default icon button to be like this : IconButton design needed

May I know how do I change it? Thank you.

Answer 1

As per these docs (see them for detailed instructions), IconButton will work with any of the icons found here . The image you have linked looks most like menu . Example of usage:

 import React, {Component} from 'react'; import IconButton from '@material-ui/core/IconButton'; import Menu from '@material-ui/icons/Menu'; class App extends Component { render() { return ( <IconButton> <Menu/> </IconButton> ); } } export default App; 

If you're using create-react-app and want to use a custom SVG, do this:

 import React, {Component} from 'react'; import IconButton from '@material-ui/core/IconButton'; import CustomMenu from './custom_menu.svg'; // root of src class App extends Component { render() { return ( <IconButton> <img src={CustomMenu}/> </IconButton> ); } } export default App;