Mui DatePicker v6: How to change default icon and its position through slots

Question

I need this:

instead of this:

But now the date picker(@mui/x-date-pickers 6.x) has switched to slots, and there are very few examples on the Web.

Answer 1

Codesandbox: https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n?file=/demo.tsx

Code for adding startAdornment for your field:

import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import BugReportIcon from "@mui/icons-material/BugReport";

//...

<DatePicker
  label="mui datapicker"
  slotProps={{
    textField: {
      InputProps: { startAdornment: <BugReportIcon /> }
    }
  }}
/>

Code for changing the default date picker icon:

   <DatePicker
     slots={{
       inputAdornment: BugReportIcon
     }}
   />

Code for change icon and its position:

<DatePicker
  slots={{
    inputAdornment: BugReportIcon
  }}
  slotProps={{
    inputAdornment: {
      position: 'start'
    }
  }}
/>