Material-ui: Can't use IconComponent to set a custom icon for Select Components

[UsamaHameed]

I am trying to change the default icon used for a select drop down by setting IconComponent to a string in the props for the select component but I get the error:
React does not recognize the IconComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconcomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The icon should get set to the icon provided in the props.

Current Behavior

I get the error: React does not recognize the IconComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconcomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Steps to Reproduce (for bugs)

const selectFieldProps = {
      autoWidth: true,
      IconComponent: "<i className='material-icons'>more_vert</i>"
}
<Select
   value={this.state.depth} 
   onChange={this.handleChange}
   inputProps={{
      name: "depth",
      id: "depth"
    }}
    {...selectFieldProps}
>
    {children}
</Select>

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-rc.0 |
| React | 16.3.2 |
| browser | Chrome 66.0.3 |

[mbrookes]

Please refer to the docs for the Icon component: https://material-ui-next.com/style/icons/#font-icons

[oliviertassinari]

@UsamaHameed Your example is incorrect. Please ask this type of question on StackOverflow. You need to provide a React component not a React element. Something like:

      <Select
        IconComponent={props => (
          <i {...props} className={`material-icons ${props.className}`}>
            more_vert
          </i>
        )}

https://codesandbox.io/s/km61o51785

[UsamaHameed]

I keep getting this error

Property 'IconComponent' does not exist on type 'IntrinsicAttributes & SelectProps & { children?: ReactNode; }'.

[paddotk]

I have the same issue. I think the documentation isn't clear enough as to what is expected; what is meant by elementType exactly? I'd expect to be able to use something like a custom SVG icon but that does not work.
@oliviertassinari I've tried your example too, doesn't work either.