[docs] Replace Checkbox with Icons in Combobox examples

Author: silviuaavram

docs/data/material/components/autocomplete/CheckboxesTags.js

@@ -1,12 +1,8 @@
-import Checkbox from '@mui/material/Checkbox';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
-const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
-const checkedIcon = <CheckBoxIcon fontSize="small" />;
-
 export default function CheckboxesTags() {
   return (
     <Autocomplete
@@ -17,13 +13,13 @@ export default function CheckboxesTags() {
       getOptionLabel={(option) => option.title}
       renderOption={(props, option, { selected }) => {
         const { key, ...optionProps } = props;
+        const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
+
         return (
           <li key={key} {...optionProps}>
-            <Checkbox
-              icon={icon}
-              checkedIcon={checkedIcon}
-              style={{ marginRight: 8 }}
-              checked={selected}
+            <SelectionIcon
+              fontSize="small"
+              style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
             />
             {option.title}
           </li>

docs/data/material/components/autocomplete/CheckboxesTags.tsx

@@ -1,12 +1,8 @@
-import Checkbox from '@mui/material/Checkbox';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
-const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
-const checkedIcon = <CheckBoxIcon fontSize="small" />;
-
 export default function CheckboxesTags() {
   return (
     <Autocomplete
@@ -17,13 +13,13 @@ export default function CheckboxesTags() {
       getOptionLabel={(option) => option.title}
       renderOption={(props, option, { selected }) => {
         const { key, ...optionProps } = props;
+        const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
+
         return (
           <li key={key} {...optionProps}>
-            <Checkbox
-              icon={icon}
-              checkedIcon={checkedIcon}
-              style={{ marginRight: 8 }}
-              checked={selected}
+            <SelectionIcon
+              fontSize="small"
+              style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
             />
             {option.title}
           </li>

docs/data/material/components/selects/MultipleSelectCheckmarks.js

@@ -5,7 +5,8 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import Select from '@mui/material/Select';
-import Checkbox from '@mui/material/Checkbox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -58,12 +59,20 @@ export default function MultipleSelectCheckmarks() {
           renderValue={(selected) => selected.join(', ')}
           MenuProps={MenuProps}
         >
-          {names.map((name) => (
-            <MenuItem key={name} value={name}>
-              <Checkbox checked={personName.includes(name)} />
-              <ListItemText primary={name} />
-            </MenuItem>
-          ))}
+          {names.map((name) => {
+            const selected = personName.includes(name);
+            const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
+
+            return (
+              <MenuItem key={name} value={name}>
+                <SelectionIcon
+                  fontSize="small"
+                  style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
+                />
+                <ListItemText primary={name} />
+              </MenuItem>
+            );
+          })}
         </Select>
       </FormControl>
     </div>

docs/data/material/components/selects/MultipleSelectCheckmarks.tsx

@@ -5,7 +5,8 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Checkbox from '@mui/material/Checkbox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -58,12 +59,20 @@ export default function MultipleSelectCheckmarks() {
           renderValue={(selected) => selected.join(', ')}
           MenuProps={MenuProps}
         >
-          {names.map((name) => (
-            <MenuItem key={name} value={name}>
-              <Checkbox checked={personName.includes(name)} />
-              <ListItemText primary={name} />
-            </MenuItem>
-          ))}
+          {names.map((name) => {
+            const selected = personName.includes(name);
+            const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
+
+            return (
+              <MenuItem key={name} value={name}>
+                <SelectionIcon
+                  fontSize="small"
+                  style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
+                />
+                <ListItemText primary={name} />
+              </MenuItem>
+            );
+          })}
         </Select>
       </FormControl>
     </div>