[Select] Feature Request: Override Dropdown Icon

[rob2d]

Hi. I am hoping it seems reasonable to override icons; specifically the ArrowDropDown found in the Select components.

Currently (v1.0.0-beta.41), it is receiving the SVG from ArrowDropDown found in internal/svg-icons/ArrowDropDown. When overriding CSS content, we cannot re-write the SVG path via CSS (that I know of -- if known method here, please enlighten me!)

What I am doing as a workaround is overriding MuiSelect.icon in the theme overrides and then creating a wrapper component. Obviously, it is a little bit hacky and would be nice to simply have a built in svgIcon class (or anything related) provided in the classes API.

As a practical matter, it's actually pretty common to use something like a chevron in material-ui Dropdowns (see https://materialdesignicons.com/icon/chevron-down for example in mind). But either way, I think the library would benefit greatly for being able to change such a prominent part of the look and feel.

(Notwithstanding, excellent job with MUI 1.0.0 so far! Absolutely pleasant experience)

[oliviertassinari]

@rob2d Your use case sounds good. We can add a customization point for the icon. Let's solve #10476 first so we have a guideline for the API and the implementation we are going to use.

[rob2d]

@oliviertassinari Okay great. Thanks for considering this idea. I avoid anything Typescript+NPM related like the plague personally, but I will try to be of use if I can find the time.

[rob2d]

@oliviertassinari This is great; another reason why I always default to this library for several years now.

Thanks! 😄 🍻