Style the Calendar/Clock icon for StaticDate/TimePicker

[kingedward35]

I am currently trying to update the icons for the various MUI Pickers components with custom icons and was able to do this with the DatePicker, TimePicker, DateTimePicker and StaticDateTImePicker components. However when I try to update the same icons for the StaticDatePicker and StaticTimePicker components I am unable to do this. Does anyone know how to update the clock and calendar icons in the toolbar for these components? Thanks.

[LukasTy]

@kingedward35 Could you please clarify which components are you referring to specifically?

[kingedward35]

I am referring to the calendar and clock icons that appear after you click on the pen icon.

[LukasTy]

I take it you are referring to these icons visible in the toolbar when manual input mode is toggled in the toolbar? I don't see any option to override these in any of the picker components. Here is the code deciding which icon to render in these cases. Could you show an example (codesandbox would be best - you can use any of our examples as a base) of how you are overriding these icons?

In any case, what do @alexfauquette @flaviendelangle think of this case? Should we add option to change these icons as well?

[kingedward35]

You are correct about the icons in the pictures above. We are currently overriding the icons in the non-static date pickers using the OpenPickerIcon , timeIcon, and dateRangeIcon props. It would be nice to be able to use a similar API to custom all of the icons in the various pickers. Thanks.

[nazarukroman]

@kingedward35 Could you please tell me how I can pass custom props to custom Icon OpenPickerIcon ? My case: I pass this props to use custom calendar icon

       components={{
          OpenPickerIcon: CalendarIcon,
        }}

And I want to pass some props to CalendarIcon, but componentsProps={{ OpenPickerIcon: { some: 'prop' } }} or OpenPickerButtonProps={{ some: 'prop' }} doesn't work.

[flaviendelangle]

And I want to pass some props to CalendarIcon, but componentsProps={{ OpenPickerIcon: { some: 'prop' } }} or OpenPickerButtonProps={{ some: 'prop' }} doesn't work.

You should be able to do componentsProps={{ OpenPickerIcon: { some: 'prop' } }} but has not been implemented yet I will add them quickly because this inconsistency is problematic...