reactjsmaterial-uidatepickermui-x-date-picker

how to customize MUI X Date Picker icon for version 5?


As I am Using MUI X Date Picker 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 X Date Picker?

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.sstatic.net/wVXvz.png

Any help will be appreciated and Thankful.


Solution

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