reactjsmaterial-uimui-xmui-x-date-picker

How to change the icon in MUI X DatePicker?


I can't add my icon to the component.

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

enter image description here


Solution

  • 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

    enter image description here

    Codesandbox Demo