How to change the icon in MUI X DatePicker?

Question

I can't add my icon to the component.

enter image description here

score 38 · Accepted Answer · edited Jun 07 '23 at 00:09

38

The slots prop of DatePicker lets you override the inner components including the OpenPickerIcon, so this is how you override it:

import AccessibleIcon from "@mui/icons-material/Accessible";

//…

<DatePicker
  slots={{
    openPickerIcon: AccessibleIcon
  }}
  {...}

This is the list of icon components that can be customized:

{
  leftArrowIcon?: elementType,
  openPickerIcon?: elementType,
  rightArrowIcon?: elementType,
  switchViewIcon?: elementType
}

edited Jun 07 '23 at 00:09

Olivier Tassinari

answered Oct 14 '21 at 10:40

NearHuscarl

Where did you find this info? I want to change OpenPickerButtonProps, but I don't know the syntax. Do you know it? – bannedFromAskingQuestions Feb 07 '22 at 13:43
Also, do you know how to resolve mask warning after adding InputFormat? – bannedFromAskingQuestions Feb 07 '22 at 13:49
@bannedFromAskingQuestions `OpenPickerButtonProps` are props of the `IconButton` at the end of the `TextField`. For example: `DatePicker OpenPickerButtonProps={{ style: { color: 'red' } }}`. `do you know how to resolve...` - you probably want to ask a separate question. – NearHuscarl Feb 07 '22 at 13:53
It seems that using "components" prop is now deprecated and they recommend us to use "slots" instead. However, this is the documentation we need in the official docs websites (with drawings). Thanks a lot! – Chemah Jun 02 '23 at 03:03
I had troubles removing this icon. It appeared that it should be written this way: ` '' }}` Maybe it would help someone :) – Justyna Skrajna Aug 17 '23 at 09:11

1 Answers1