CODEWITHSUNDEEP
reactjsmaterial-uitimepicker
Harry_C
Harry_C

Reputation: 177

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

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.

Upvotes: 0

Views: 104

Answers (1)

Akis
Akis

Reputation: 2252

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.

Upvotes: 1

Related Questions