Sometimes, we want to change the dropdown icon in React Material UI select field.

In this article, we’ll look at how to change the dropdown icon in React Material UI select field.

How to change the dropdown icon in React Material UI select field?

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Person from "@material-ui/icons/Person";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      value={age}
      onChange={handleChange}
      IconComponent={() => <Person />}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

We set the Select‘s IconComponent prop to a function that returns the Person icon component.

And we add some MenuItem components to add some choices.

Now we should see the person icon as the drop down’s icon on the right.

Conclusion

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.