如何为版本 5 自定义材质 UI 日期选择器图标？

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

How to change the icon in MUI DatePicker?

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.

Answer 1

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
}}