CODEWITHSUNDEEP
material-uithemes
David
David

Reputation: 161

Change checkbox icon in theme

Is it possible to change the icon of the checkbox from the theme in Material UI?

props: {
        MuiButtonBase: {
            disableRipple: buttonRippleDisable
        },
        MuiButton: {
            disableElevation: buttonElevationDisable
        },
        MuiCheckbox: {
            icon: CheckCircleOutline,
        }
    }

Upvotes: 2

Views: 4506

Answers (2)

Tony King
Tony King

Reputation: 61

In MUI v5

const theme = createMuiTheme({
    components: {
        MuiCheckbox: {
            defaultProps: {
                icon: {YOUR ICON},
                checkedIcon: {YOUR ICON}
            }
           
        }
    }
});

Upvotes: 3

Rajiv
Rajiv

Reputation: 3772

yes. pass the icon in props object in theme as you've done above.

const theme = createMuiTheme({
    props:{
        MuiCheckbox:{
            icon: <FavoriteBorder />,
            checkedIcon:<Favorite />
        }
    }
});

Now wherever you use the checkbox in the scope of this theme, you'll get this icon by default.

Working demo:
Edit empty-fog-wjvnr

Upvotes: 2

Related Questions