I can't add my icon to the component.
https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc
I can't add my icon to the component.
https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc
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;
The
slots
prop ofDatePicker
lets you override the inner components including theOpenPickerIcon
, so this is how you override it:This is the list of icon components that can be customized:
https://mui.com/x/api/date-pickers/date-picker/#slots