How to change the icon in MUI DatePicker?

Viewed 8218
1 Answers

The components prop of DatePicker lets you override the inner components including the OpenPickerIcon, so this is how you override it. For reference, see the full API of DatePicker here:

import AccessibleIcon from "@mui/icons-material/Accessible";
<DatePicker
  components={{
    OpenPickerIcon: AccessibleIcon
  }}
  {...}

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

{
  LeftArrowIcon?: elementType,
  OpenPickerIcon?: elementType,
  RightArrowIcon?: elementType,
  SwitchViewIcon?: elementType
}

enter image description here

Codesandbox Demo

Related