Is there a simpler way to use the sharp checkbox icon in Material UI's React Checkbox component?

Viewed 10

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...

enter image description here

  <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.

enter image description here

<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)} />
0 Answers
Related