The Material UI library for React includes a checkbox component. It's possible to add custom styling for various states of the checkbox in the component's sx prop like this...
<Checkbox
sx={{
fontSize: "20px",
color: theme.palette.neutral[600],
'&.Mui-checked': {
color: theme.palette.neutral.black
},
'&.MuiCheckbox-indeterminate': {
color: theme.palette.neutral.black
}
}}
checked={selected}
value={option.id}
onChange={(e) => handleCheckbox(e)} />
However, the default MUI checkbox component uses the checkbox icon with rounded corners called CheckBoxIcon from MUI's icon library. https://mui.com/material-ui/material-icons/?query=checkbox
I would like to instead use the library's sharp checkbox icon called CheckBoxSharp. https://mui.com/material-ui/material-icons/?query=checkbox&theme=Sharp Is there a simple way to make the React MUI checkbox component use the sharp icon instead of the rounded icon? For example, is there a single prop or two that does the trick?
Since I was unable to find such an approach, I took the long way, which works but seems like unnecessary boilerplate for using the MUI library.
<Checkbox
sx={{fontSize: "18px"}}
icon={<CheckBoxSharp style={{ color: theme.palette.neutral.black }} />}
checkedIcon={<CheckBoxOutlineBlankSharp style={{ color: theme.palette.neutral[600] }} />}
indeterminateIcon={<IndeterminateCheckBoxSharp style={{ color: theme.palette.neutral.black }} />}
checked={selected} value={option.id} onChange={(e) => handleCheckbox(e)} />

