Here is my simple React code for a single ponent 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;

Here is my simple React code for a single ponent 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;

• javascript
• reactjs
• material-ui

• Warning: React does not recognize the startIcon prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase starticon instead. If you accidentally passed it from a parent ponent, remove it from the DOM element ... – Đức Quỳnh Nguyễn Commented Oct 3, 2019 at 9:53
• Which example you try? Can you send link? – SuleymanSah Commented Oct 3, 2019 at 9:59
• 1 I made a demo on code sandbox, but it works just fine cpim7.csb.app – Joshua Commented Oct 3, 2019 at 10:05
• 3 Are you using version 4.5.0? – CD.. Commented Oct 3, 2019 at 10:51
• 1 My solution to this problem was to upgrade from version 4.3.1 to 4.5.1. This library changes so fast its hard to keep track of it. – Bilthon Commented Jan 23, 2020 at 2:32

3 Answers 3

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.

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

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

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>