Material-ui: How to reduce size of radio/checkbox

[barbalex]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The standard size of 48x48px for Radios and Checkboxes is way to large for long lists on Desktop.
(How) Can this size be reduced without ending up overriding lots of settings set by material?

[oliviertassinari]

@barbalex I would like to add a documentation section about the selection controls overrides. You can do something like:

import React from "react";
import Checkbox from "material-ui/Checkbox";
import CheckBoxOutlineBlankIcon from "material-ui-icons/CheckBoxOutlineBlank";
import CheckBoxIcon from "material-ui-icons/CheckBox";

function Checkboxes(props) {
  return (
    <Checkbox
      style={{ width: 36, height: 36 }}
      icon={<CheckBoxOutlineBlankIcon style={{ fontSize: 20 }} />}
      checkedIcon={<CheckBoxIcon style={{ fontSize: 20 }} />}
    />
  );
}

export default Checkboxes;

https://codesandbox.io/s/l7jr4207j7

Do you want to work on it?

[wasyster]

@barbalex
I tried this code sample for mui 3.9 with typescript v3.x and its not working. CheckBoxOutlineBlankIcon and CheckBoxIcon not exist.

[oliviertassinari]

@wasyster You can find this demo live in https://material-ui.com/demos/selection-controls/#checkboxes. We are working on migrating all our demos to TypeScript: #14897.

[wasyster]

@oliviertassinari
I copied out the import from the demo example form https://github.com/mui-org/material-ui/blob/494c410716a11d2239d95ad3c000a8d43a78065c/docs/src/pages/demos/selection-controls/CheckboxLabels.js#L100-L111, and still stays:

import CheckBoxOutlineBlankIcon from 'material-ui-icons/CheckBoxOutlineBlank';
import CheckBoxIcon from 'material-ui-icons/CheckBox';

"Cannot find module 'material-ui-icons/CheckBoxOutlineBlank'.ts(2307)"
"Cannot find module 'material-ui-icons/CheckBox'.ts(2307)"

But if I change import for this, it exist and works:
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';

[oliviertassinari]

@wasyster It's outdated. Use the documentation website.