Change the clock svg to another svg in Material UI X Timepicker

Question

I am using the Material UI x time-picker component in my app. I would like to change the clock SVG in the component to a custom SVG (a Chevron). I read that I need to use the props components. But what is the component called? I tried with the testid ClockIcon but that was not successful.

Answer 1

I believe what you are looking for is this:

<TimePicker
    label="Time"
    value={value}
    onChange={handleChange}
    renderInput={(params) => <TextField {...params} />}
    components={{
      OpenPickerIcon: SearchIcon //  Replace with your icon 
    }}
  />

For example I have imported the SearchIcon to use it as an example to replace the default one.