To incorporate an icon into MobileDatePicker in MUI v5, you can use the InputProps
property and pass an endAdornment
prop with the icon component.
import { MobileDatePicker, InputAdornment, IconButton } from "@mui/lab";
import EventIcon from "@mui/icons-material/Event";
<MobileDatePicker
label="Date"
value={selectedDate}
onChange={handleDateChange}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<EventIcon />
</IconButton>
</InputAdornment>
),
}}
/>
)}
/>
In the example above, we import the IconButton
component from MUI and the EventIcon
from the Material Icons library. We then pass this icon component to the InputAdornment
component, which we pass to the endAdornment
prop of InputProps
within the renderInput
prop of MobileDatePicker
.
Asked: 2023-07-07 03:41:02 +0000
Seen: 8 times
Last updated: Jul 07 '23