How to change the icon in MUI X Date Picker?

Question

I'm trying to add a custom icon to the MUI X Date Picker component, but it isn't displaying as expected

https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc

I want my custom icon to replace the default calendar icon in the Date Picker component, but I can't figure out which prop or approach is correct.

Answer 1

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
}

https://mui.com/x/api/date-pickers/date-picker/#slots

Answer 2

Just add the openPickerIcon property in slots of DatePicker, DateTimePicker etc to acheive it. (For adding custom svg icon)

 import CalendarIcon"../Components/CalendarIcon";
    
    //…
    
 <DatePicker
   slots={{
     openPickerIcon: CalendarIcon
    }}
/>

Create an SVG Component

import React from 'react';

import calendarSVG from './../calenderIcon/calendar.svg';

const CalendarIcon = () => (
  <img src={calendarSVG} alt="Calendar" />
);

export default CalendarIcon;