CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
EdG
EdG

Reputation: 2351

MoreVert icon not visible material ui

I want to use the MoreVert icon to show the options for signout and settings options on my header of application. I included MoreVert icon like this (below) and the popup comes when I click on the icon's supposed place but I cannot see the MoreVert icon. What should I do?

render(){
        return (
            <header className={c.container}>
                <div className='logo'>
                    <Link to='/app'>
                        <img className='img-logo' src='/public/img/logo.png'/>
                    </Link>
                </div>
                <div className='flex-fill'/>
                <div className='user'>
                    Apurv Gandhwani
                </div>
                <IconMenu
                    iconButtonElement={
                        <IconButton><MoreVertIcon /></IconButton>
                    }
                    targetOrigin={{horizontal: 'right', vertical: 'top'}}
                    anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                >
                    <MenuItem primaryText="Settings"/>
                    <MenuItem primaryText="Help"/>
                    <MenuItem onTouchTap={this.onSignOutClick.bind(this)} primaryText="Sign out"/>
                </IconMenu>

            </header>
        )
    }

enter image description here

enter image description here

enter image description here

Upvotes: 2

Views: 929

Answers (1)

Canastro
Canastro

Reputation: 3009

I think the problem is just related with colours, try the following:

import {red500, greenA200} from 'material-ui/styles/colors';
<MoreVertIcon color={red500} hoverColor={greenA200} />

You can check: http://www.material-ui.com/#/customization/colors for the available colours.

Upvotes: 2

Related Questions