Can't use "startIcon" & "endIcon" from <Button/> API of Material-UI

user_12158422 0
Viewed 8728

Here is my simple React code for a single component but it keep throwing the same warning every-time I checked. Even when copy and past the example still same warning and the icon is nowhere to be seen. Please help!

Link

import React, { Component } from 'react';
import { Button } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';


class AddWorkButton extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  
            <React.Fragment>
                <Button
                        variant="contained"
                        color="secondary"
                        startIcon={<AddIcon/>}
                >
                    TEST
                </Button>
            </React.Fragment>
        );
    }
}

export default AddWorkButton;
material-ui reactjs javascript
3 Answers

I got the same error.

The problem on my side was that react-script start was already running when I updated the Material-UI package to 4.5.

After I have restarted the react-script start everything just started to work.

user_114318060 
  <Button variant="contained" color="primary" >
          Send <ArrowForwardIcon /> </Button>

Not sure which way is the correct but I got it working this way,

user_15475350

The startIcon and endIcon properties await the entry of a element of type React.ReactNode, which itself is a React.ReactElement. That is, just use React.cloneElement().

<Button variant="contained" color="primary" startIcon={React.cloneElement(<SendIcon/>)}> TEST </Button>
user_150551760
Related