ReactElement for Icon={<CustomIcon />} not working. [Check the render method of `Dropzone`.]

[aleksander351]

Bug Report

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Dropzone.

Describe the bug

I have a custom svg icon as a functional react component... export default function UploadIcon () { ... } ... etc

But I got the above mentioned error, if I try to set it in the dropzone component: <DropzoneArea Icon={<UploadIcon />} >

Versions

• OS: [e.g. iOS]
• Browser: chrome
• material-ui-dropzone version: 3.5.0

[wolflu05]

This is explained a bit stupid in the documentation, because it says elementType. Actually Icon expects a function that returns an element.

Use:

<DropzoneArea Icon={() => <UploadIcon />} >

See: #267

[anuj-developer]

import { ReactComponent as IconPlaceholder } from './assets/site_icon/user_icon.svg'; This works then you can pass as Icon={IconPlaceholder}

[callmejm]

This is explained a bit stupid in the documentation, because it says elementType. Actually Icon expects a function that returns an element.

Use:

<DropzoneArea Icon={() => <UploadIcon />} >

See: #267

thank you ! you save my life ! just thinking about to do a position absolute to overlap the dropzone !