how to customize material UI date-Picker icon for version 5?

Question

As I am Using Date picker of material UI version 5,I trying to replace Icon with my customized (image or svg) but not able to do so. please help :-

i found some result for this for changing icon but not able to apply over customized one

components={{
                  OpenPickerIcon: ?
                }}

Its only applying icon which are available on material UI but required some other image or svg there.

this link image contain icon which required change [1]: https://i.stack.imgur.com/wVXvz.png

Any help will be appreciated and Thankful.

score 3 · Accepted Answer · answered Jan 30 '22 at 04:32

3

You need to wrap your image in a custom icon component. See details on custom icons here.

For instance:

function DateIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="{your svg path}" />
    </SvgIcon>
  );
}

And then:

components={{
  OpenPickerIcon: DateIcon
}}

answered Jan 30 '22 at 04:32

ChiefMcFrank

Thank you for this answer it really helped me. – Yash Mohan Jan 31 '22 at 16:27
Great! Glad to hear it. Be sure to upvote it and choose it as the accepted answer – ChiefMcFrank Jan 31 '22 at 18:21
Not sure why, but it was working for me when I did `openPickerIcon` rather than `OpenPickerIcon`. – Ibrahim Farooq Jun 06 '23 at 08:06

1 Answers1