Customizing checkbox items

The default appearance of Material-UI Checkbox components tries to resemble the native browser checkbox input element. You can change the icon that's used for both the checked and the unchecked state of the component. Even after you change the icons used by Checkbox, any color changes are still honored.

How to do it...

Here's some code that imports several Material-UI icons and uses them to configure the icons used by the Checkbox components:

import React, { useState, useEffect } from 'react';

import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox...