Can we remove the calendar icon from the TextField (MUI)?

Question

Here is my basic code to accomplish the task, but couldn't come up with any outcome

 <TextField
        sx={{
          '&::-webkit-calendar-picker-indicator': {
            display: 'none',
            '-webkit-appearance': 'none',
          },
        }}
        id="outlined-basic"
        variant="outlined"
        type="date"
        helperText="Please select the date"
      />

Also, I did a bit research on InputProps (endAdornment) within TextField to remove the icon, but that didn't work.

Answer 1

You can define in the components property the icon to be null for both cases.

<TimePicker
      label="Time"
      value={value}
      onChange={handleChange}
      renderInput={(params) => <TextField {...params} />}
      disableOpenPicker
    />
    <DateTimePicker
      label="Date&Time picker"
      value={value}
      onChange={handleChange}
      renderInput={(params) => <TextField {...params} />}
      disableOpenPicker
    />

Here is a working sandbox