diff --git a/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.js b/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.js
index 45c2c9378c81..251390d64135 100644
--- a/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.js
+++ b/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.js
@@ -10,6 +10,7 @@ import {
   useParsedFormat,
   usePickersContext,
 } from '@mui/x-date-pickers/hooks';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
 function ReadOnlyDateField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
@@ -34,12 +35,19 @@ function ReadOnlyDateField(props) {
     }
   };
 
+  console.log(InputProps);
+
   return (
     <TextField
       {...other}
       value={value == null ? '' : value.format(format)}
       placeholder={parsedFormat}
-      InputProps={{ ...InputProps, readOnly: true }}
+      InputProps={{
+        ...InputProps,
+        readOnly: true,
+        endAdornment: <CalendarIcon color="action" />,
+        sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
+      }}
       error={hasValidationError}
       onClick={handleTogglePicker}
     />
diff --git a/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx b/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx
index 4e247a3edb8c..c9cdc16eae4e 100644
--- a/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx
+++ b/docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx
@@ -14,6 +14,7 @@ import {
   useParsedFormat,
   usePickersContext,
 } from '@mui/x-date-pickers/hooks';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
 function ReadOnlyDateField(props: DatePickerFieldProps<Dayjs, false>) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
@@ -43,7 +44,12 @@ function ReadOnlyDateField(props: DatePickerFieldProps<Dayjs, false>) {
       {...other}
       value={value == null ? '' : value.format(format)}
       placeholder={parsedFormat}
-      InputProps={{ ...InputProps, readOnly: true }}
+      InputProps={{
+        ...InputProps,
+        readOnly: true,
+        endAdornment: <CalendarIcon color="action" />,
+        sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
+      }}
       error={hasValidationError}
       onClick={handleTogglePicker}
     />