CODEWITHSUNDEEP
reactjsmaterial-uimui-xmui-x-date-picker
kadadov
kadadov

Reputation: 223

How to change the icon in MUI X DatePicker?

I can't add my icon to the component.

https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc

enter image description here

Upvotes: 22

Views: 39100

Answers (3)

Ishwar Kshirsagar
Ishwar Kshirsagar

Reputation: 31

If you want to customize icon before passing to mui x date picker, you can assign arrow function which returns customized icon

import CalendarIcon"../Components/CalendarIcon";
    
    //…
    
 <DatePicker
   slots={{
     openPickerIcon: () => <CalendarMonthOutlinedIcon sx={{ fill: 'black' }} />
    }}
/>

Upvotes: 1

Aftab Ahmed
Aftab Ahmed

Reputation: 915

Just add the openPickerIcon property in slots of DatePicker, DateTimePicker etc to acheive it. (For adding custom svg icon)

 import CalendarIcon"../Components/CalendarIcon";
    
    //…
    
 <DatePicker
   slots={{
     openPickerIcon: CalendarIcon
    }}
/>

Create an SVG Component

import React from 'react';

import calendarSVG from './../calenderIcon/calendar.svg';

const CalendarIcon = () => (
  <img src={calendarSVG} alt="Calendar" />
);

export default CalendarIcon;

Upvotes: 2

NearHuscarl
NearHuscarl

Reputation: 81623

The slots prop of DatePicker lets you override the inner components including the OpenPickerIcon, so this is how you override it:

import AccessibleIcon from "@mui/icons-material/Accessible";

//…

<DatePicker
  slots={{
    openPickerIcon: AccessibleIcon
  }}
  {...}

This is the list of icon components that can be customized:

{
  leftArrowIcon?: elementType,
  openPickerIcon?: elementType,
  rightArrowIcon?: elementType,
  switchViewIcon?: elementType
}

https://mui.com/x/api/date-pickers/date-picker/#slots

enter image description here

Codesandbox Demo

Upvotes: 52

Related Questions