[docs] Add example to add a second icon next to the field's opening b…

…utton

docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import InputAdornment from '@mui/material/InputAdornment';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+function CustomInputAdornment(props) {
+  const { hasError, children, sx, ...other } = props;
+  return (
+    <InputAdornment {...other}>
+      <PriorityHighIcon
+        color="error"
+        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+      />
+      {children}
+    </InputAdornment>
+  );
+}
+
+export default function SecondIconNextToOpeningButton() {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Picker with error icon"
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+          onError={(error) => setHasError(!!error)}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{
+            inputAdornment: { hasError },
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
+  const { hasError, children, sx, ...other } = props;
+  return (
+    <InputAdornment {...other}>
+      <PriorityHighIcon
+        color="error"
+        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+      />
+      {children}
+    </InputAdornment>
+  );
+}
+
+export default function SecondIconNextToOpeningButton() {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Picker with error icon"
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+          onError={(error) => setHasError(!!error)}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{
+            inputAdornment: { hasError } as any,
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx.preview

@@ -0,0 +1,10 @@
+<DatePicker
+  label="Picker with error icon"
+  maxDate={dayjs('2022-04-17')}
+  defaultValue={dayjs('2022-04-18')}
+  onError={(error) => setHasError(!!error)}
+  slots={{ inputAdornment: CustomInputAdornment }}
+  slotProps={{
+    inputAdornment: { hasError } as any,
+  }}
+/>

docs/data/date-pickers/custom-opening-button/custom-opening-button.md

@@ -34,3 +34,10 @@ If you want to track the opening of the picker, you should use the `onOpen` / `o
 ```
 
 :::
+
+## Add a second icon next to the opening button
+
+If you want to add a second icon next to the opening button, you can use the `inputAdornment` slot.
+In the example below, the warning icon will be visible anytime the current value is invalid:
+
+{{"demo": "SecondIconNextToOpeningButton.js"}}