CODEWITHSUNDEEP
javascriptreactjswebmaterial-ui
Alvindrakes
Alvindrakes

Reputation: 637

How to change the design of the IconButton in material-ui?

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.

Upvotes: 4

Views: 5125

Answers (1)

Tadas Antanavicius
Tadas Antanavicius

Reputation: 5410

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;

Upvotes: 4

Related Questions