Unable to add Icon in Material-UI button

I am using the following code to add a Icon to button

<Button variant="contained" color="primary" endIcon={<Icon>add_circle_outline</Icon>} onClick={e => this.setState({creating: true})}>
    Create
</Button>

But it's not showing the icon and I am getting the following warning in logs.

index.js:1446 Warning: React does not recognize the `endIcon` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `endicon` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in button (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button))
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at RulesPage.js:179)
    in div (at RulesPage.js:174)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at RulesPage.js:138)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at RulesPage.js:136)
    in div (at RulesPage.js:133)
    in RulesPage (created by WithStyles(RulesPage))
    in WithStyles(RulesPage) (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (at src/index.js:102)
    in Switch (at src/index.js:99)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:98)
    in ThemeProvider (at src/index.js:96)
    in Provider (at src/index.js:95)