Repository: mui/material-ui (TypeScript)
Date: 2020-12-14 20:20:54+00:00
Task type: Feature

Issue:
[DatePicker] Allow customizing icons
<!-- Provide a general summary of the feature in the Title above -->

<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] I have searched the [issues](https://github.com/mui-org/material-ui-pickers/issues) of this repository and believe that this is not a duplicate.

## Summary 💡

Month picker dropdown should have icon customization (like those for month pagination `leftArrowIcon` etc)
<!-- Describe how it should work. -->

## Examples 🌈
expected: 

<img src="https://user-images.githubusercontent.com/14000941/89267289-b10e2780-d63f-11ea-8c04-714ea24516fc.png" width="400" />

current:
<img src="https://user-images.githubusercontent.com/14000941/89267364-cf742300-d63f-11ea-9589-294932739c3a.png" width="400" />

<!--
  Provide a link to the Material design specification, other implementations,
  or screenshots of the expected behavior.
-->

## Motivation 🔦

<!--
  What are you trying to accomplish? How has the lack of this feature affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->



Issue discussion:
@jahglow Which API would you envision? What do you think of https://github.com/mui-org/material-ui/issues/21453?
@oliviertassinari I'm for consistency. So choose whatever pattern you've chosen for the rest of the props and we'll follow along. Since both packages relate to the same set of MUI, then a single way of doing things is preferred. I like the `components` approach, it's more flexible for you to pass down any necessary props and for me to adjust the render if necessary.

Solution patch:
diff --git a/docs/src/pages/components/date-time-picker/CustomDateTimePicker.js b/docs/src/pages/components/date-time-picker/CustomDateTimePicker.js
--- a/docs/src/pages/components/date-time-picker/CustomDateTimePicker.js
+++ b/docs/src/pages/components/date-time-picker/CustomDateTimePicker.js
@@ -26,8 +26,10 @@ export default function CustomDateTimePicker() {
             setValue(newValue);
           }}
           minDate={new Date('2018-01-01')}
-          leftArrowIcon={<AlarmIcon />}
-          rightArrowIcon={<SnoozeIcon />}
+          components={{
+            LeftArrowIcon: AlarmIcon,
+            RightArrowIcon: SnoozeIcon,
+          }}
           leftArrowButtonText="Open previous month"
           rightArrowButtonText="Open next month"
           openPickerIcon={<ClockIcon />}
diff --git a/docs/src/pages/components/date-time-picker/CustomDateTimePicker.tsx b/docs/src/pages/components/date-time-picker/CustomDateTimePicker.tsx
--- a/docs/src/pages/components/date-time-picker/CustomDateTimePicker.tsx
+++ b/docs/src/pages/components/date-time-picker/CustomDateTimePicker.tsx
@@ -28,8 +28,10 @@ export default function CustomDateTimePicker() {
             setValue(newValue);
           }}
           minDate={new Date('2018-01-01')}
-          leftArrowIcon={<AlarmIcon />}
-          rightArrowIcon={<SnoozeIcon />}
+          components={{
+            LeftArrowIcon: AlarmIcon,
+            RightArrowIcon: SnoozeIcon,
+          }}
           leftArrowButtonText="Open previous month"
           rightArrowButtonText="Open next month"
           openPickerIcon={<ClockIcon />}
diff --git a/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx b/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx
--- a/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx
+++ b/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx
@@ -5,7 +5,7 @@ import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
-import ArrowSwitcher, {
+import PickersArrowSwitcher, {
   ExportedArrowSwitcherProps,
 } from '../internal/pickers/PickersArrowSwitcher';
 import {
@@ -109,15 +109,15 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
     ampm,
     ampmInClock,
     classes,
+    components,
+    componentsProps,
     date,
     disableIgnoringDatePartForTimeValidation,
     getClockLabelText = getDefaultClockLabelText,
     getHoursClockNumberText = getHoursAriaText,
     getMinutesClockNumberText = getMinutesAriaText,
     getSecondsClockNumberText = getSecondsAriaText,
-    leftArrowButtonProps,
     leftArrowButtonText = 'open previous view',
-    leftArrowIcon,
     maxTime,
     minTime,
     minutesStep = 1,
@@ -126,9 +126,7 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
     openNextView,
     openPreviousView,
     previousViewAvailable,
-    rightArrowButtonProps,
     rightArrowButtonText = 'open next view',
-    rightArrowIcon,
     shouldDisableTime,
     showViewSwitcher,
     view,
@@ -278,14 +276,12 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
   return (
     <React.Fragment>
       {showViewSwitcher && (
-        <ArrowSwitcher
+        <PickersArrowSwitcher
           className={classes.arrowSwitcher}
-          leftArrowButtonProps={leftArrowButtonProps}
-          rightArrowButtonProps={rightArrowButtonProps}
           leftArrowButtonText={leftArrowButtonText}
           rightArrowButtonText={rightArrowButtonText}
-          leftArrowIcon={leftArrowIcon}
-          rightArrowIcon={rightArrowIcon}
+          components={components}
+          componentsProps={componentsProps}
           onLeftClick={openPreviousView}
           onRightClick={openNextView}
           isLeftDisabled={previousViewAvailable}
@@ -335,6 +331,22 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
    * @ignore
    */
   classes: PropTypes.object.isRequired,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Selected date @DateIOType.
    */
@@ -361,18 +373,10 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
    * Get clock number aria-text for seconds.
    */
   getSecondsClockNumberText: PropTypes.func,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * Max time acceptable time.
    * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
@@ -408,18 +412,10 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
    * @ignore
    */
   previousViewAvailable: PropTypes.bool.isRequired,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Dynamically check if time is disabled or not.
    * If returns `false` appropriate time point will ot be acceptable.
diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
@@ -52,6 +52,24 @@ const DateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', Respons
    * @default "CLEAR"
    */
   clearText: PropTypes.node,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -151,18 +169,10 @@ const DateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', Respons
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -285,18 +295,10 @@ const DateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', Respons
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -6,7 +6,7 @@ import { calculateRangePreview } from './date-range-manager';
 import PickersCalendar, { PickersCalendarProps } from '../DayPicker/PickersCalendar';
 import DateRangeDay, { DateRangePickerDayProps } from '../DateRangePickerDay';
 import { defaultMinDate, defaultMaxDate } from '../internal/pickers/constants/prop-types';
-import ArrowSwitcher, {
+import PickersArrowSwitcher, {
   ExportedArrowSwitcherProps,
 } from '../internal/pickers/PickersArrowSwitcher';
 import {
@@ -88,32 +88,28 @@ function DateRangePickerViewDesktop<TDate>(
   props: DesktopDateRangeCalendarProps<TDate> & WithStyles<typeof styles>,
 ) {
   const {
-    date,
-    classes,
     calendars = 2,
     changeMonth,
-    leftArrowButtonProps,
-    leftArrowButtonText = 'previous month',
-    leftArrowIcon,
-    rightArrowButtonProps,
-    rightArrowButtonText = 'next month',
-    rightArrowIcon,
-    onChange,
-    disableFuture,
-    disablePast,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    minDate: __minDate,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    maxDate: __maxDate,
+    classes,
+    components,
+    componentsProps,
     currentlySelectingRangeEnd,
     currentMonth,
+    date,
+    disableFuture,
+    disablePast,
+    leftArrowButtonText = 'Previous month',
+    maxDate: maxDateProp,
+    minDate: minDateProp,
+    onChange,
     renderDay = (_, dateRangeProps) => <DateRangeDay {...dateRangeProps} />,
+    rightArrowButtonText = 'Next month',
     ...other
   } = props;
 
   const utils = useUtils<TDate>();
-  const minDate = __minDate || utils.date(defaultMinDate);
-  const maxDate = __maxDate || utils.date(defaultMaxDate);
+  const minDate = minDateProp || utils.date(defaultMinDate);
+  const maxDate = maxDateProp || utils.date(defaultMaxDate);
 
   const [rangePreviewDay, setRangePreviewDay] = React.useState<TDate | null>(null);
 
@@ -165,7 +161,7 @@ function DateRangePickerViewDesktop<TDate>(
 
         return (
           <div key={index} className={classes.rangeCalendarContainer}>
-            <ArrowSwitcher
+            <PickersArrowSwitcher
               className={classes.arrowSwitcher}
               onLeftClick={selectPreviousMonth}
               onRightClick={selectNextMonth}
@@ -173,14 +169,13 @@ function DateRangePickerViewDesktop<TDate>(
               isRightHidden={index !== calendars - 1}
               isLeftDisabled={isPreviousMonthDisabled}
               isRightDisabled={isNextMonthDisabled}
-              leftArrowButtonProps={leftArrowButtonProps}
               leftArrowButtonText={leftArrowButtonText}
-              leftArrowIcon={leftArrowIcon}
-              rightArrowButtonProps={rightArrowButtonProps}
+              components={components}
+              componentsProps={componentsProps}
               rightArrowButtonText={rightArrowButtonText}
-              rightArrowIcon={rightArrowIcon}
-              text={utils.format(monthOnIteration, 'monthAndYear')}
-            />
+            >
+              {utils.format(monthOnIteration, 'monthAndYear')}
+            </PickersArrowSwitcher>
             <PickersCalendar<TDate>
               {...other}
               key={index}
diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx
@@ -36,25 +36,21 @@ const onlyDateView = ['date'] as ['date'];
 export function DateRangePickerViewMobile<TDate>(props: DesktopDateRangeCalendarProps<TDate>) {
   const {
     changeMonth,
+    components,
+    componentsProps,
     date,
-    leftArrowButtonProps,
     leftArrowButtonText,
-    leftArrowIcon,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    minDate: __minDate,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    maxDate: __maxDate,
+    maxDate: maxDateProp,
+    minDate: minDateProp,
     onChange,
-    rightArrowButtonProps,
-    rightArrowButtonText,
-    rightArrowIcon,
     renderDay = (_, dayProps) => <DateRangeDay<TDate> {...dayProps} />,
+    rightArrowButtonText,
     ...other
   } = props;
 
   const utils = useUtils();
-  const minDate = __minDate || utils.date(defaultMinDate);
-  const maxDate = __maxDate || utils.date(defaultMaxDate);
+  const minDate = minDateProp || utils.date(defaultMinDate);
+  const maxDate = maxDateProp || utils.date(defaultMaxDate);
 
   return (
     <React.Fragment>
@@ -63,11 +59,9 @@ export function DateRangePickerViewMobile<TDate>(props: DesktopDateRangeCalendar
         views={onlyDateView}
         onMonthChange={changeMonth as any}
         leftArrowButtonText={leftArrowButtonText}
-        leftArrowButtonProps={leftArrowButtonProps}
-        leftArrowIcon={leftArrowIcon}
-        rightArrowButtonProps={rightArrowButtonProps}
+        components={components}
+        componentsProps={componentsProps}
         rightArrowButtonText={rightArrowButtonText}
-        rightArrowIcon={rightArrowIcon}
         minDate={minDate}
         maxDate={maxDate}
         {...other}
diff --git a/packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx b/packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx
--- a/packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx
+++ b/packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx
@@ -190,6 +190,24 @@ const DateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unk
    * @default "CLEAR"
    */
   clearText: PropTypes.node,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -297,18 +315,10 @@ const DateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unk
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -477,18 +487,10 @@ const DateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unk
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
--- a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
+++ b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
@@ -79,13 +79,6 @@ export const styles = (theme: Theme) =>
       display: 'flex',
       justifyContent: 'center',
     },
-    iconButton: {
-      zIndex: 1,
-      backgroundColor: theme.palette.background.paper,
-    },
-    previousMonthButton: {
-      marginRight: 12,
-    },
     daysHeader: {
       display: 'flex',
       justifyContent: 'center',
diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx
--- a/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx
+++ b/packages/material-ui-lab/src/DayPicker/PickersCalendarHeader.tsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Fade from '@material-ui/core/Fade';
 import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import { SlideDirection } from './PickersSlideTransition';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
@@ -11,7 +10,7 @@ import FadeTransitionGroup from './PickersFadeTransitionGroup';
 import { DateValidationProps } from '../internal/pickers/date-utils';
 // tslint:disable-next-line no-relative-import-in-test
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import ArrowSwitcher, {
+import PickersArrowSwitcher, {
   ExportedArrowSwitcherProps,
 } from '../internal/pickers/PickersArrowSwitcher';
 import {
@@ -22,10 +21,8 @@ import { DatePickerView } from '../internal/pickers/typings/Views';
 
 export type ExportedCalendarHeaderProps<TDate> = Pick<
   PickersCalendarHeaderProps<TDate>,
-  | 'leftArrowIcon'
-  | 'rightArrowIcon'
-  | 'leftArrowButtonProps'
-  | 'rightArrowButtonProps'
+  | 'components'
+  | 'componentsProps'
   | 'leftArrowButtonText'
   | 'rightArrowButtonText'
   | 'getViewSwitchingButtonText'
@@ -34,6 +31,22 @@ export type ExportedCalendarHeaderProps<TDate> = Pick<
 export interface PickersCalendarHeaderProps<TDate>
   extends ExportedArrowSwitcherProps,
     Omit<DateValidationProps<TDate>, 'shouldDisableDate'> {
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components?: ExportedArrowSwitcherProps['components'] & {
+    SwitchViewButton?: React.ElementType;
+    SwitchViewIcon?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps?: ExportedArrowSwitcherProps['componentsProps'] & {
+    switchViewButton?: any;
+  };
   openView: DatePickerView;
   views: DatePickerView[];
   currentMonth: TDate;
@@ -62,26 +75,26 @@ export const styles = (theme: Theme) =>
     yearSelectionSwitcher: {
       marginRight: 'auto',
     },
-    previousMonthButton: {
-      marginRight: 24,
-    },
-    switchViewDropdown: {
+    switchView: {
       willChange: 'transform',
       transition: theme.transitions.create('transform'),
       transform: 'rotate(0deg)',
     },
-    switchViewDropdownDown: {
+    switchViewActive: {
       transform: 'rotate(180deg)',
     },
-    monthTitleContainer: {
+    label: {
       display: 'flex',
       maxHeight: 30,
       overflow: 'hidden',
+      alignItems: 'center',
       cursor: 'pointer',
       marginRight: 'auto',
+      ...theme.typography.body1,
+      fontWeight: theme.typography.fontWeightMedium,
     },
-    monthText: {
-      marginRight: 4,
+    labelItem: {
+      marginRight: 6,
     },
   });
 
@@ -100,35 +113,37 @@ function PickersCalendarHeader<TDate>(
   props: PickersCalendarHeaderProps<TDate> & WithStyles<typeof styles>,
 ) {
   const {
-    onViewChange,
     classes,
+    components = {},
+    componentsProps = {},
     currentMonth: month,
     disableFuture,
     disablePast,
     getViewSwitchingButtonText = getSwitchingViewAriaText,
-    leftArrowButtonProps,
-    leftArrowButtonText = 'previous month',
-    leftArrowIcon,
+    leftArrowButtonText = 'Previous month',
     maxDate,
     minDate,
     onMonthChange,
-    reduceAnimations,
-    rightArrowButtonProps,
-    rightArrowButtonText = 'next month',
-    rightArrowIcon,
+    onViewChange,
     openView: currentView,
+    reduceAnimations,
+    rightArrowButtonText = 'Next month',
     views,
   } = props;
 
   const utils = useUtils<TDate>();
 
+  const SwitchViewButton = components.SwitchViewButton || IconButton;
+  const switchViewButtonProps = componentsProps.switchViewButton || {};
+  const SwitchViewIcon = components.SwitchViewIcon || ArrowDropDownIcon;
+
   const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
 
   const isNextMonthDisabled = useNextMonthDisabled(month, { disableFuture, maxDate });
   const isPreviousMonthDisabled = usePreviousMonthDisabled(month, { disablePast, minDate });
 
-  const toggleView = () => {
+  const handleToggleView = () => {
     if (views.length === 1 || !onViewChange) {
       return;
     }
@@ -145,58 +160,52 @@ function PickersCalendarHeader<TDate>(
   return (
     <React.Fragment>
       <div className={classes.root}>
-        <div role="presentation" className={classes.monthTitleContainer} onClick={toggleView}>
+        <div role="presentation" className={classes.label} onClick={handleToggleView}>
           <FadeTransitionGroup
             reduceAnimations={reduceAnimations}
             transKey={utils.format(month, 'month')}
           >
-            <Typography
+            <div
               aria-live="polite"
               data-mui-test="calendar-month-text"
-              align="center"
-              variant="subtitle1"
-              className={classes.monthText}
+              className={classes.labelItem}
             >
               {utils.format(month, 'month')}
-            </Typography>
+            </div>
           </FadeTransitionGroup>
           <FadeTransitionGroup
             reduceAnimations={reduceAnimations}
             transKey={utils.format(month, 'year')}
           >
-            <Typography
+            <div
               aria-live="polite"
               data-mui-test="calendar-year-text"
-              align="center"
-              variant="subtitle1"
+              className={classes.labelItem}
             >
               {utils.format(month, 'year')}
-            </Typography>
+            </div>
           </FadeTransitionGroup>
           {views.length > 1 && (
-            <IconButton
+            <SwitchViewButton
               size="small"
-              data-mui-test="calendar-view-switcher"
-              onClick={toggleView}
               className={classes.yearSelectionSwitcher}
               aria-label={getViewSwitchingButtonText(currentView)}
+              {...switchViewButtonProps}
             >
-              <ArrowDropDownIcon
-                className={clsx(classes.switchViewDropdown, {
-                  [classes.switchViewDropdownDown]: currentView === 'year',
+              <SwitchViewIcon
+                className={clsx(classes.switchView, {
+                  [classes.switchViewActive]: currentView === 'year',
                 })}
               />
-            </IconButton>
+            </SwitchViewButton>
           )}
         </div>
         <Fade in={currentView === 'date'}>
-          <ArrowSwitcher
-            leftArrowButtonProps={leftArrowButtonProps}
-            rightArrowButtonProps={rightArrowButtonProps}
+          <PickersArrowSwitcher
             leftArrowButtonText={leftArrowButtonText}
             rightArrowButtonText={rightArrowButtonText}
-            leftArrowIcon={leftArrowIcon}
-            rightArrowIcon={rightArrowIcon}
+            components={components}
+            componentsProps={componentsProps}
             onLeftClick={selectPreviousMonth}
             onRightClick={selectNextMonth}
             isLeftDisabled={isPreviousMonthDisabled}
@@ -210,9 +219,7 @@ function PickersCalendarHeader<TDate>(
 
 PickersCalendarHeader.propTypes = {
   leftArrowButtonText: PropTypes.string,
-  leftArrowIcon: PropTypes.node,
   rightArrowButtonText: PropTypes.string,
-  rightArrowIcon: PropTypes.node,
 };
 
 export default withStyles(styles, { name: 'MuiPickersCalendarHeader' })(PickersCalendarHeader) as <
diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
--- a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
+++ b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
@@ -40,6 +40,24 @@ const DesktopDateRangePicker = makeDateRangePicker(
    * className applied to the root component.
    */
   className: PropTypes.string,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -129,18 +147,10 @@ const DesktopDateRangePicker = makeDateRangePicker(
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -258,18 +268,10 @@ const DesktopDateRangePicker = makeDateRangePicker(
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
--- a/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
+++ b/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
@@ -53,6 +53,24 @@ const DesktopDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPr
    * className applied to the root component.
    */
   className: PropTypes.string,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -150,18 +168,10 @@ const DesktopDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPr
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -325,18 +335,10 @@ const DesktopDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPr
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
--- a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
+++ b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -52,6 +52,24 @@ const MobileDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', M
    * @default "CLEAR"
    */
   clearText: PropTypes.node,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -145,18 +163,10 @@ const MobileDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', M
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -275,18 +285,10 @@ const MobileDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', M
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
--- a/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
+++ b/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
@@ -68,6 +68,24 @@ const MobileDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * @default "CLEAR"
    */
   clearText: PropTypes.node,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -169,18 +187,10 @@ const MobileDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -345,18 +355,10 @@ const MobileDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx
--- a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx
+++ b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx
@@ -37,6 +37,24 @@ const StaticDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', S
    * className applied to the root component.
    */
   className: PropTypes.string,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -131,18 +149,10 @@ const StaticDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', S
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -256,18 +266,10 @@ const StaticDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', S
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/material-ui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
--- a/packages/material-ui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
+++ b/packages/material-ui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
@@ -53,6 +53,24 @@ const StaticDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * className applied to the root component.
    */
   className: PropTypes.string,
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    LeftArrowButton: PropTypes.elementType,
+    LeftArrowIcon: PropTypes.elementType,
+    RightArrowButton: PropTypes.elementType,
+    RightArrowIcon: PropTypes.elementType,
+    SwitchViewButton: PropTypes.elementType,
+    SwitchViewIcon: PropTypes.elementType,
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
   /**
    * Allows to pass configured date-io adapter directly. More info [here](https://next.material-ui-pickers.dev/guides/date-adapter-passing)
    * ```jsx
@@ -155,18 +173,10 @@ const StaticDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * @ignore
    */
   label: PropTypes.node,
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps: PropTypes.object,
   /**
    * Left arrow icon aria-label text.
    */
   leftArrowButtonText: PropTypes.string,
-  /**
-   * Left arrow icon.
-   */
-  leftArrowIcon: PropTypes.node,
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -326,18 +336,10 @@ const StaticDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerPro
    * Custom formatter to be passed into Rifm component.
    */
   rifmFormatter: PropTypes.func,
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps: PropTypes.object,
   /**
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText: PropTypes.string,
-  /**
-   * Right arrow icon.
-   */
-  rightArrowIcon: PropTypes.node,
   /**
    * Disable specific date. @DateIOType
    */
diff --git a/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx b/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx
--- a/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx
+++ b/packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx
@@ -2,19 +2,30 @@ import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 import { createStyles, WithStyles, withStyles, Theme, useTheme } from '@material-ui/core/styles';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import IconButton from '@material-ui/core/IconButton';
 import ArrowLeftIcon from '../svg-icons/ArrowLeft';
 import ArrowRightIcon from '../svg-icons/ArrowRight';
 
 export interface ExportedArrowSwitcherProps {
   /**
-   * Left arrow icon.
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   * @default {}
    */
-  leftArrowIcon?: React.ReactNode;
+  components?: {
+    LeftArrowButton?: React.ElementType;
+    LeftArrowIcon?: React.ElementType;
+    RightArrowButton?: React.ElementType;
+    RightArrowIcon?: React.ElementType;
+  };
   /**
-   * Right arrow icon.
+   * The props used for each slot inside.
+   * @default {}
    */
-  rightArrowIcon?: React.ReactNode;
+  componentsProps?: {
+    leftArrowButton?: any;
+    rightArrowButton?: any;
+  };
   /**
    * Left arrow icon aria-label text.
    */
@@ -23,35 +34,25 @@ export interface ExportedArrowSwitcherProps {
    * Right arrow icon aria-label text.
    */
   rightArrowButtonText?: string;
-  /**
-   * Props to pass to left arrow button.
-   */
-  leftArrowButtonProps?: Partial<IconButtonProps>;
-  /**
-   * Props to pass to right arrow button.
-   */
-  rightArrowButtonProps?: Partial<IconButtonProps>;
 }
 
 interface ArrowSwitcherProps extends ExportedArrowSwitcherProps, React.HTMLProps<HTMLDivElement> {
+  children?: React.ReactNode;
   isLeftDisabled: boolean;
   isLeftHidden?: boolean;
   isRightDisabled: boolean;
   isRightHidden?: boolean;
   onLeftClick: () => void;
   onRightClick: () => void;
-  text?: string;
 }
 
 export const styles = (theme: Theme) =>
   createStyles({
-    root: {},
-    iconButton: {
-      zIndex: 1,
-      backgroundColor: theme.palette.background.paper,
+    root: {
+      display: 'flex',
     },
-    previousMonthButtonMargin: {
-      marginRight: 24,
+    spacer: {
+      width: theme.spacing(3),
     },
     hidden: {
       visibility: 'hidden',
@@ -65,64 +66,75 @@ const PickersArrowSwitcher = React.forwardRef<
   ArrowSwitcherProps & WithStyles<typeof styles>
 >((props, ref) => {
   const {
+    children,
     classes,
     className,
+    components = {},
+    componentsProps = {},
     isLeftDisabled,
     isLeftHidden,
     isRightDisabled,
     isRightHidden,
-    leftArrowButtonProps,
     leftArrowButtonText,
-    leftArrowIcon = <ArrowLeftIcon />,
     onLeftClick,
     onRightClick,
-    rightArrowButtonProps,
     rightArrowButtonText,
-    rightArrowIcon = <ArrowRightIcon />,
-    text,
     ...other
   } = props;
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
 
+  const LeftArrowButton = components.LeftArrowButton || IconButton;
+  const leftArrowButtonProps = componentsProps.leftArrowButton || {};
+  const LeftArrowIcon = components.LeftArrowIcon || ArrowLeftIcon;
+
+  const RightArrowButton = components.RightArrowButton || IconButton;
+  const rightArrowButtonProps = componentsProps.rightArrowButton || {};
+  const RightArrowIcon = components.RightArrowIcon || ArrowRightIcon;
+
   return (
     <div className={clsx(classes.root, className)} ref={ref} {...other}>
-      <IconButton
+      <LeftArrowButton
         size="small"
         aria-hidden={isLeftHidden}
         aria-label={leftArrowButtonText}
-        {...leftArrowButtonProps}
+        title={leftArrowButtonText}
         disabled={isLeftDisabled}
+        edge="end"
         onClick={onLeftClick}
-        className={clsx(classes.iconButton, leftArrowButtonProps?.className, {
+        {...leftArrowButtonProps}
+        className={clsx(leftArrowButtonProps.className, {
           [classes.hidden]: isLeftHidden,
-          [classes.previousMonthButtonMargin]: !text,
         })}
       >
-        {isRtl ? rightArrowIcon : leftArrowIcon}
-      </IconButton>
-      {text && (
-        <Typography variant="subtitle1" display="inline">
-          {text}
+        {isRtl ? <RightArrowIcon /> : <LeftArrowIcon />}
+      </LeftArrowButton>
+      {children ? (
+        <Typography variant="subtitle1" component="span">
+          {children}
         </Typography>
+      ) : (
+        <div className={classes.spacer} />
       )}
-      <IconButton
+      <RightArrowButton
         size="small"
         aria-hidden={isRightHidden}
         aria-label={rightArrowButtonText}
-        {...rightArrowButtonProps}
+        title={rightArrowButtonText}
+        edge="start"
         disabled={isRightDisabled}
         onClick={onRightClick}
-        className={clsx(classes.iconButton, rightArrowButtonProps?.className, {
+        {...rightArrowButtonProps}
+        className={clsx(rightArrowButtonProps.className, {
           [classes.hidden]: isRightHidden,
         })}
       >
-        {isRtl ? leftArrowIcon : rightArrowIcon}
-      </IconButton>
+        {isRtl ? <LeftArrowIcon /> : <RightArrowIcon />}
+      </RightArrowButton>
     </div>
   );
 });
 
-export default withStyles(styles, { name: 'MuiPickersArrowSwitcher' })(
-  React.memo(PickersArrowSwitcher),
+export default React.memo(
+  withStyles(styles, { name: 'MuiPickersArrowSwitcher' })(PickersArrowSwitcher),
 );


Test patch:
diff --git a/packages/material-ui-lab/src/DatePicker/DatePicker.test.tsx b/packages/material-ui-lab/src/DatePicker/DatePicker.test.tsx
--- a/packages/material-ui-lab/src/DatePicker/DatePicker.test.tsx
+++ b/packages/material-ui-lab/src/DatePicker/DatePicker.test.tsx
@@ -92,12 +92,14 @@ describe('<DatePicker />', () => {
 
     expect(getByMuiTest('calendar-month-text')).to.have.text('January');
 
-    fireEvent.click(screen.getByLabelText('next month'));
-    fireEvent.click(screen.getByLabelText('next month'));
+    const nextMonth = screen.getByLabelText('Next month');
+    const previousMonth = screen.getByLabelText('Previous month');
+    fireEvent.click(nextMonth);
+    fireEvent.click(nextMonth);
 
-    fireEvent.click(screen.getByLabelText('previous month'));
-    fireEvent.click(screen.getByLabelText('previous month'));
-    fireEvent.click(screen.getByLabelText('previous month'));
+    fireEvent.click(previousMonth);
+    fireEvent.click(previousMonth);
+    fireEvent.click(previousMonth);
 
     expect(getByMuiTest('calendar-month-text')).to.have.text('December');
   });
@@ -416,7 +418,7 @@ describe('<DatePicker />', () => {
       />,
     );
 
-    fireEvent.click(screen.getByLabelText('next month'));
+    fireEvent.click(screen.getByLabelText('Next month'));
     expect(onMonthChangeMock.callCount).to.equal(1);
   });
 
diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx
@@ -104,7 +104,7 @@ describe('<DateRangePicker />', () => {
 
     fireEvent.click(screen.getByLabelText('Jan 1, 2019'));
     fireEvent.click(
-      screen.getByLabelText('next month', { selector: ':not([aria-hidden="true"])' }),
+      screen.getByLabelText('Next month', { selector: ':not([aria-hidden="true"])' }),
     );
     fireEvent.click(screen.getByLabelText('Mar 19, 2019'));