Revision history [back]

You can include a calendar icon in the MUI v5 Mobile Date Picker using the following steps:

1. Install the MUI Icons package by running the following command:

   npm install @mui/icons-material

2. Import the CalendarTodayIcon from the MUI Icons package using the following code:

   import CalendarTodayIcon from '@mui/icons-material/CalendarToday';

3. Pass the CalendarTodayIcon as the startIcon prop to the MUI v5 Mobile Date Picker component, as shown below:

   import { MobileDatePicker } from '@mui/lab';
   
   function Example() {
    return (
      <MobileDatePicker
        label="Select date"
        value={selectedDate}
        onChange={handleDateChange}
        startIcon={<CalendarTodayIcon />}
        inputFormat="dd/MM/yyyy"
        renderInput={(props) => <TextField {...props} fullWidth />}
      />
    );
   }