[DatePicker] Allow customizing icons

[jahglow]

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

Summary 💡

Month picker dropdown should have icon customization (like those for month pagination leftArrowIcon etc)

Examples 🌈

expected:

current:

Motivation 🔦

[oliviertassinari]

@jahglow Which API would you envision? What do you think of #21453?

[jahglow]

@oliviertassinari I'm for consistency. So choose whatever pattern you've chosen for the rest of the props and we'll follow along. Since both packages relate to the same set of MUI, then a single way of doing things is preferred. I like the components approach, it's more flexible for you to pass down any necessary props and for me to adjust the render if necessary.

[oliviertassinari]

Considering the number of components that can be customized in the date picker, e.g. mui/mui-x#6488, and that we are going in the same direction fo the data grid, I think that we should remove leftArrowIcon, rightArrowIcon, rightArrowButtonProps, leftArrowButtonProps props, and replace them with the components={{ MonthNextIconButton, MonthPreviewIconButton }} API. Simpler, and allows us to build custom design systems.

@jahglow For the icon you are interested in, maybe DayDropdownIconButton?

[jahglow]

Yeah, works for us as well

[angadp]

Can I take this one? I have gone through the documentation and the issue. Would love for this to be my first PR.

[angadp]

From what I understand I need to expose a prop which will take an icon and that icon should appear on the datepicker.

[oliviertassinari]

@angadp Feel free to work on it :). We need to introduce a components prop to handed the override of nested elements #21453.

[angadp]

Thanks will go through the threads

[jackcwu]

@tcho0501 and I will take a try at it!