Can't use IconComponent to set a custom icon for Select Components

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.

• 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

[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

[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.