@mui/material#FormLabel TypeScript Examples

Question = ({ question }: QuestionProps) => {
  const { t } = useTranslation()
  const formik = useFormikContext<SupportFormData>()
  if (!question) {
    return null
  }
  return (
    <FormControl fullWidth required error={Boolean(formik.errors.roles)} component="fieldset">
      <FormGroup>
        <FormLabel component="legend">{t(question.title)}</FormLabel>
        {question.options.map((option: Option, index) => (
          <React.Fragment key={index}>
            <CheckboxField label={option.label} name={option.name} />
            {option.textFieldOptions && option.value ? (
              <FormTextField
                type="text"
                name={option.textFieldOptions.name}
                label={option.textFieldOptions.placeholder}
                placeholder={t(option.textFieldOptions.placeholder)}
              />
            ) : null}
          </React.Fragment>
        ))}
      </FormGroup>
      {Boolean(formik.errors[question.key]) && (
        <FormHelperText error>{t(question.errorMessage)}</FormHelperText>
      )}
    </FormControl>
  )
}

export default function Newsletter() {
  const { t } = useTranslation()

  return (
    <Grid container spacing={6} justifyContent="center" direction="column" alignItems="center">
      <Grid item xs={12}>
        <FormControl component="fieldset">
          <FormLabel component="legend">{t('support:steps.newsletter.title')}</FormLabel>
          <CheckboxField label="support:steps.newsletter.label" name="person.newsletter" />
        </FormControl>
      </Grid>
    </Grid>
  )
}

OptionsCheck: React.ComponentType<WidgetProps<MuiWidgetBinding> & OptionsCheckRendererProps> = (
    {
        schema, storeKeys, showValidity, valid, required, errors,
        row, widgets,
    }
) => {
    const oneOfVal = schema.getIn(['items', 'oneOf'])
    if (!oneOfVal) return null
    const InfoRenderer = widgets?.InfoRenderer
    return <FormControl
        required={required} error={!valid && showValidity} component="fieldset" fullWidth
        size={schema.getIn(['view', 'dense']) ? 'small' : undefined}
        disabled={schema.get('readOnly') as boolean}
    >
        <FormLabel component="legend" style={{width: '100%'}}>
            <TransTitle schema={schema} storeKeys={storeKeys}/>
            {InfoRenderer && schema?.get('info') ?
                <InfoRenderer
                    schema={schema} variant={'icon'} openAs={'modal'}
                    storeKeys={storeKeys} valid={valid} errors={errors}
                    align={'right'} dense
                /> :
                undefined}
        </FormLabel>
        <FormGroup row={row}>
            <OptionsCheckValue
                oneOfValues={oneOfVal as List<OrderedMap<string, string>>} storeKeys={storeKeys}
                required={required} schema={schema}
                disabled={schema.get('readOnly') as boolean}
            />
        </FormGroup>

        <ValidityHelperText errors={errors} showValidity={showValidity} schema={schema}/>
    </FormControl>
}

export default function Settings() {
    const [theme, setTheme] = useRecoilState(themeSettings);

    useTitle("Abrechnung - Settings");

    const [confirmClearCacheOpen, setConfirmClearCacheOpen] = useState(false);

    const handleConfirmClearCacheOpen = () => {
        setConfirmClearCacheOpen(true);
    };

    const handleConfirmClearCacheClose = () => {
        setConfirmClearCacheOpen(false);
    };

    const handleConfirmClearCache = () => {
        clearCache();
        setConfirmClearCacheOpen(false);
        window.location.reload();
    };

    const handleDarkModeChange = (event) => {
        const val = event.target.value;
        setTheme({
            ...theme,
            darkMode: val,
        });
    };

    return (
        <MobilePaper>
            <Typography component="h3" variant="h5">
                Settings
            </Typography>
            <Alert sx={{ mt: 1 }} severity="info">
                These settings are stored locally on your device. Clearing your Browser's local storage will reset them.
            </Alert>
            <Box sx={{ mt: 2 }}>
                <FormControl sx={{ width: 200 }}>
                    <FormGroup>
                        <FormLabel component="legend">Theme</FormLabel>
                        <Select
                            id="dark-mode-select"
                            labelId="dark-mode-select-label"
                            value={theme.darkMode}
                            label="Dark Mode"
                            variant="standard"
                            onChange={handleDarkModeChange}
                        >
                            <MenuItem value="browser">System Default</MenuItem>
                            <MenuItem value="dark">Dark Mode</MenuItem>
                            <MenuItem value="light">Light Mode</MenuItem>
                        </Select>
                    </FormGroup>
                </FormControl>
            </Box>
            <Divider sx={{ mt: 1 }} />
            <Box sx={{ mt: 1 }}>
                <FormControl component="fieldset" variant="standard">
                    <FormLabel component="legend">Clear Cache</FormLabel>
                    <FormGroup>
                        <Button variant="contained" color="error" onClick={handleConfirmClearCacheOpen}>
                            Clear
                        </Button>
                    </FormGroup>
                    {/*<FormHelperText>ACHTUNG!</FormHelperText>*/}
                </FormControl>
            </Box>

            <Dialog
                open={confirmClearCacheOpen}
                onClose={handleConfirmClearCacheClose}
                aria-labelledby="dialog-confirm-clear-cache"
                aria-describedby="dialog-confirm-clear-cache-description"
            >
                <DialogTitle id="dialog-confirm-clear-cache">{"Clear Cache?"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="dialog-confirm-clear-cache-description">
                        This action will clear your local cache. All your settings (this page) will not be reset.
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleConfirmClearCache} autoFocus>
                        Yes
                    </Button>
                    <Button onClick={handleConfirmClearCacheClose}>Cancel</Button>
                </DialogActions>
            </Dialog>
        </MobilePaper>
    );
}

export default function CheckboxButtonGroup({
  helperText,
  options,
  label,
  name,
  parseError,
  required,
  labelKey = 'label',
  valueKey = 'id',
  returnObject,
  disabled,
  row,
  control,
  checkboxColor,
  ...rest
}: CheckboxButtonGroupProps): JSX.Element {
  const theme = useTheme()
  const { field: { value = [], onChange }, fieldState: { invalid, error } } = useController({
    name,
    rules: required ? { required: 'This field is required' } : undefined,
    control
  })

  helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : helperText

  const handleChange = (index: number | string) => {
    const newArray = [...value]
    const exists =
      value.findIndex((i: any) =>
        returnObject ? i[valueKey] === index : i === index
      ) === -1
    if (exists) {
      newArray.push(
        returnObject ? options.find(i => i[valueKey] === index) : index
      )
    } else {
      newArray.splice(
        value.findIndex((i: any) =>
          returnObject ? i[valueKey] === index : i === index
        ),
        1
      )
    }
    // setValue(name, newArray, { shouldValidate: true })
    onChange(newArray)
    if (typeof rest.onChange === 'function') {
      rest.onChange(newArray)
    }
  }

  return (
    <FormControl error={invalid} required={required}>
      {label && <FormLabel error={invalid}>{label}</FormLabel>}
      <FormGroup row={row}>
        {options.map((option: any) => {
          const optionKey = option[valueKey]
          if (!optionKey) {
            console.error(
              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
              option
            )
          }
          const isChecked =
            value.findIndex((item: any) =>
              returnObject ? item[valueKey] === optionKey : item === optionKey
            ) !== -1
          return (
            <FormControlLabel
              control={
                <Checkbox
                  sx={{
                    color: invalid ? theme.palette.error.main : undefined
                  }}
                  color={checkboxColor || 'primary'}
                  value={optionKey}
                  checked={isChecked}
                  disabled={disabled}
                  onChange={() => handleChange(optionKey)}
                />
              }
              label={option[labelKey]}
              key={optionKey}
            />
          )
        })}
      </FormGroup>
      {helperText && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  )
}

export default function RadioButtonGroup({
  helperText,
  options,
  label,
  name,
  parseError,
  labelKey = 'label',
  valueKey = 'id',
  required,
  emptyOptionLabel,
  returnObject,
  row,
  control,
  ...rest
}: RadioButtonGroupProps): JSX.Element {
  const theme = useTheme()
  const { field: { value, onChange }, fieldState: { invalid, error } } = useController({
    name,
    rules: required ? { required: 'This field is required' } : undefined,
    control
  })

  helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : helperText

  const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
    const radioValue = (event.target as HTMLInputElement).value
    const returnValue = returnObject
      ? options.find(items => items[valueKey] === radioValue)
      : radioValue
    // setValue(name, returnValue, { shouldValidate: true })
    onChange(returnValue)
    if (typeof rest.onChange === 'function') {
      rest.onChange(returnValue)
    }
  }

  return (
    <FormControl error={invalid}>
      {label && <FormLabel required={required} error={invalid}>{label}</FormLabel>}
      <RadioGroup onChange={onRadioChange}
                  name={name}
                  row={row}
                  value={value || ''}>
        {emptyOptionLabel && (
          <FormControlLabel
            control={<Radio sx={{
              color: invalid ? theme.palette.error.main : undefined
            }} checked={!value} />}
            label={emptyOptionLabel}
            value=""
          />
        )}
        {options.map((option: any) => {
          const optionKey = option[valueKey]
          if (!optionKey) {
            console.error(
              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
              option
            )
          }
          const isChecked = !!(
            value &&
            (returnObject
              ? value[valueKey] === optionKey
              : value === optionKey)
          )
          return (
            <FormControlLabel
              control={<Radio sx={{
                color: invalid ? theme.palette.error.main : undefined
              }} checked={isChecked} />}
              value={optionKey}
              label={option[labelKey]}
              key={optionKey}
            />
          )
        })}
      </RadioGroup>
      {helperText && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  )
}

IconsScreen = ({ classes }: IIconsScreenSimple) => {
  const [color, setColor] = useState<string>("default");
  return (
    <div className={classes.container}>
      <Grid container>
        <FormControl>
          <FormLabel id="demo-radio-buttons-group-label">Color</FormLabel>
          <RadioGroup
            row
            aria-labelledby="demo-radio-buttons-group-label"
            defaultValue="default"
            name="radio-buttons-group"
            onChange={(c) => {
              setColor(c.target.value);
            }}
          >
            <FormControlLabel value="def" control={<Radio />} label="Default" />
            <FormControlLabel value="red" control={<Radio />} label="Color" />
          </RadioGroup>
        </FormControl>
      </Grid>
      <h1>Logos</h1>
      <Grid
        container
        spacing={4}
        textAlign={"center"}
        className={clsx(classes.root, {
          [classes.red]: color === "red",
        })}
      >
        <Grid item xs={3}>
          <cicons.ConsoleLogo />
          <br />
          ConsoleLogo
        </Grid>
        <Grid item xs={3}>
          <cicons.LoginMinIOLogo />
          <br />
          LoginMinIOLogo
        </Grid>

        <Grid item xs={3}>
          <cicons.OperatorLogo />
          <br />
          OperatorLogo
        </Grid>
      </Grid>
      <h1>Loaders</h1>
      <Grid
        container
        spacing={4}
        textAlign={"center"}
        className={clsx(classes.root, {
          [classes.red]: color === "red",
        })}
      >
        <Grid item xs={3}>
          <Loader />
          <br />
          Loader
        </Grid>
      </Grid>
      <h1>Icons</h1>
      <Grid
        container
        spacing={4}
        textAlign={"center"}
        className={clsx(classes.root, {
          [classes.red]: color === "red",
        })}
      >
        <Grid item xs={3} sm={2} md={1}>
          <cicons.AccountIcon />
          <br />
          AccountIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AddAccessRuleIcon />
          <br />
          AddAccessRuleIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AddFolderIcon />
          <br />
          AddFolderIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AddIcon />
          <br />
          AddIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AddMembersToGroupIcon />
          <br />
          AddMembersToGroupIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AddNewTagIcon />
          <br />
          AddNewTagIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AlertIcon />
          <br />
          AlertIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AllBucketsIcon />
          <br />
          AllBucketsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ArrowIcon />
          <br />
          ArrowIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ArrowRightIcon />
          <br />
          ArrowRightIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AzureTierIcon />
          <br />
          AzureTierIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.AzureTierIconXs />
          <br />
          AzureTierIconXs
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.BackSettingsIcon />
          <br />
          BackSettingsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.BucketEncryptionIcon />
          <br />
          BucketEncryptionIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.BucketQuotaIcon />
          <br />
          BucketQuotaIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.BucketReplicationIcon />
          <br />
          BucketReplicationIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.BucketsIcon />
          <br />
          BucketsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CalendarIcon />
          <br />
          CalendarIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CallHomeFeatureIcon />
          <br />
          CallHomeFeatureIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CancelledIcon />
          <br />
          CancelledIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ChangeAccessPolicyIcon />
          <br />
          ChangeAccessPolicyIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ChangePasswordIcon />
          <br />
          ChangePasswordIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CircleIcon />
          <br />
          CircleIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ClosePanelIcon />
          <br />
          ClosePanelIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ClustersIcon />
          <br />
          ClustersIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CollapseIcon />
          <br />
          CollapseIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ComputerLineIcon />
          <br />
          ComputerLineIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ConfigurationsListIcon />
          <br />
          ConfigurationsListIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ConfirmDeleteIcon />
          <br />
          ConfirmDeleteIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ConfirmModalIcon />
          <br />
          ConfirmModalIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ConsoleIcon />
          <br />
          ConsoleIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CopyIcon />
          <br />
          CopyIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CreateGroupIcon />
          <br />
          CreateGroupIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CreateIcon />
          <br />
          CreateIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CreateNewPathIcon />
          <br />
          CreateNewPathIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.CreateUserIcon />
          <br />
          CreateUserIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DashboardIcon />
          <br />
          DashboardIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DeleteIcon />
          <br />
          DeleteIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DeleteNonCurrentIcon />
          <br />
          DeleteNonCurrentIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DiagnosticsFeatureIcon />
          <br />
          DiagnosticsFeatureIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DiagnosticsIcon />
          <br />
          DiagnosticsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DisabledIcon />
          <br />
          DisabledIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DocumentationIcon />
          <br />
          DocumentationIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DownloadIcon />
          <br />
          DownloadIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DownloadStatIcon />
          <br />
          DownloadStatIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DriveFormatErrorsIcon />
          <br />
          DriveFormatErrorsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.DrivesIcon />
          <br />
          DrivesIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EditIcon />
          <br />
          EditIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EditTagIcon />
          <br />
          EditTagIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EditTenantIcon />
          <br />
          EditTenantIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EditYamlIcon />
          <br />
          EditYamlIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EditorThemeSwitchIcon />
          <br />
          EditorThemeSwitchIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EgressIcon />
          <br />
          EgressIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EnabledIcon />
          <br />
          EnabledIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.EventSubscriptionIcon />
          <br />
          EventSubscriptionIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileBookIcon />
          <br />
          FileBookIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileCloudIcon />
          <br />
          FileCloudIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileCodeIcon />
          <br />
          FileCodeIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileConfigIcon />
          <br />
          FileConfigIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileDbIcon />
          <br />
          FileDbIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileFontIcon />
          <br />
          FileFontIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileImageIcon />
          <br />
          FileImageIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileLinkIcon />
          <br />
          FileLinkIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileLockIcon />
          <br />
          FileLockIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileMissingIcon />
          <br />
          FileMissingIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileMusicIcon />
          <br />
          FileMusicIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FilePdfIcon />
          <br />
          FilePdfIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FilePptIcon />
          <br />
          FilePptIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileTxtIcon />
          <br />
          FileTxtIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileVideoIcon />
          <br />
          FileVideoIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileWorldIcon />
          <br />
          FileWorldIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileXlsIcon />
          <br />
          FileXlsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FileZipIcon />
          <br />
          FileZipIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FolderIcon />
          <br />
          FolderIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.FormatDrivesIcon />
          <br />
          FormatDrivesIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.GoogleTierIcon />
          <br />
          GoogleTierIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.GoogleTierIconXs />
          <br />
          GoogleTierIconXs
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.GroupsIcon />
          <br />
          GroupsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.HardBucketQuotaIcon />
          <br />
          HardBucketQuotaIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.HealIcon />
          <br />
          HealIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.HelpIcon />
          <br />
          HelpIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.HelpIconFilled />
          <br />
          HelpIconFilled
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.HistoryIcon />
          <br />
          HistoryIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.IAMPoliciesIcon />
          <br />
          IAMPoliciesIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.InfoIcon />
          <br />
          InfoIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.JSONIcon />
          <br />
          JSONIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LambdaBalloonIcon />
          <br />
          LambdaBalloonIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LambdaIcon />
          <br />
          LambdaIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LambdaNotificationsIcon />
          <br />
          LambdaNotificationsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LegalHoldIcon />
          <br />
          LegalHoldIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LicenseIcon />
          <br />
          LicenseIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LifecycleConfigIcon />
          <br />
          LifecycleConfigIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LinkIcon />
          <br />
          LinkIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LockIcon />
          <br />
          LockIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LogoutIcon />
          <br />
          LogoutIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.LogsIcon />
          <br />
          LogsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.MetadataIcon />
          <br />
          MetadataIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.MinIOTierIcon />
          <br />
          MinIOTierIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.MinIOTierIconXs />
          <br />
          MinIOTierIconXs
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.MirroringIcon />
          <br />
          MirroringIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.MultipleBucketsIcon />
          <br />
          MultipleBucketsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.NewAccountIcon />
          <br />
          NewAccountIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.NewPathIcon />
          <br />
          NewPathIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.NewPoolIcon />
          <br />
          NewPoolIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.NextArrowIcon />
          <br />
          NextArrowIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectBrowser1Icon />
          <br />
          ObjectBrowser1Icon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectBrowserFolderIcon />
          <br />
          ObjectBrowserFolderIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectBrowserIcon />
          <br />
          ObjectBrowserIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectInfoIcon />
          <br />
          ObjectInfoIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectManagerIcon />
          <br />
          ObjectManagerIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ObjectPreviewIcon />
          <br />
          ObjectPreviewIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.OfflineRegistrationBackIcon />
          <br />
          OfflineRegistrationBackIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.OfflineRegistrationIcon />
          <br />
          OfflineRegistrationIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.OnlineRegistrationBackIcon />
          <br />
          OnlineRegistrationBackIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.OnlineRegistrationIcon />
          <br />
          OnlineRegistrationIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.OpenListIcon />
          <br />
          OpenListIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PasswordKeyIcon />
          <br />
          PasswordKeyIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PerformanceFeatureIcon />
          <br />
          PerformanceFeatureIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PermissionIcon />
          <br />
          PermissionIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PreviewIcon />
          <br />
          PreviewIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PrometheusErrorIcon />
          <br />
          PrometheusErrorIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.PrometheusIcon />
          <br />
          PrometheusIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RecoverIcon />
          <br />
          RecoverIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RedoIcon />
          <br />
          RedoIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RefreshIcon />
          <br />
          RefreshIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RemoveAllIcon />
          <br />
          RemoveAllIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RemoveIcon />
          <br />
          RemoveIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ReportedUsageFullIcon />
          <br />
          ReportedUsageFullIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ReportedUsageIcon />
          <br />
          ReportedUsageIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.RetentionIcon />
          <br />
          RetentionIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.S3TierIcon />
          <br />
          S3TierIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.S3TierIconXs />
          <br />
          S3TierIconXs
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SearchIcon />
          <br />
          SearchIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SelectAllIcon />
          <br />
          SelectAllIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SelectMultipleIcon />
          <br />
          SelectMultipleIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ServersIcon />
          <br />
          ServersIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ServiceAccountCredentialsIcon />
          <br />
          ServiceAccountCredentialsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ServiceAccountIcon />
          <br />
          ServiceAccountIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ServiceAccountsIcon />
          <br />
          ServiceAccountsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SettingsIcon />
          <br />
          SettingsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ShareIcon />
          <br />
          ShareIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SpeedtestIcon />
          <br />
          SpeedtestIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.StorageIcon />
          <br />
          StorageIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.SyncIcon />
          <br />
          SyncIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TagsIcon />
          <br />
          TagsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TenantsIcon />
          <br />
          TenantsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TenantsOutlineIcon />
          <br />
          TenantsOutlineIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TiersIcon />
          <br />
          TiersIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TiersNotAvailableIcon />
          <br />
          TiersNotAvailableIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.ToolsIcon />
          <br />
          ToolsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TotalObjectsIcon />
          <br />
          TotalObjectsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TraceIcon />
          <br />
          TraceIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.TrashIcon />
          <br />
          TrashIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UploadFile />
          <br />
          UploadFile
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UploadFolderIcon />
          <br />
          UploadFolderIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UploadIcon />
          <br />
          UploadIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UploadStatIcon />
          <br />
          UploadStatIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UptimeIcon />
          <br />
          UptimeIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.UsersIcon />
          <br />
          UsersIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.VerifiedIcon />
          <br />
          VerifiedIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.VersionIcon />
          <br />
          VersionIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.VersionsIcon />
          <br />
          VersionsIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.WarnIcon />
          <br />
          WarnIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.WarpIcon />
          <br />
          WarpIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <cicons.WatchIcon />
          <br />
          WatchIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.AlertCloseIcon />
          <br />
          AlertCloseIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.OpenSourceIcon />
          <br />
          OpenSourceIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.LicenseDocIcon />
          <br />
          LicenseDocIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.BackIcon />
          <br />
          BackIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.FilterIcon />
          <br />
          FilterIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.SuccessIcon />
          <br />
          SuccessIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.NetworkGetIcon />
          <br />
          NetworkGetIcon
        </Grid>
        <Grid item xs={3} sm={2} md={1}>
          <cicons.NetworkPutIcon />
          <br />
          NetworkPutIcon
        </Grid>
      </Grid>
      <h1>Menu Icons</h1>
      <Grid
        container
        spacing={4}
        textAlign={"center"}
        className={clsx(classes.root, {
          [classes.red]: color === "red",
        })}
      >
        <Grid item xs={3} sm={2} md={1}>
          <micons.AccessMenuIcon />
          <br />
          AccessMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.AccountsMenuIcon />
          <br />
          AccountsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.AuditLogsMenuIcon />
          <br />
          AuditLogsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.BucketsMenuIcon />
          <br />
          BucketsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.CallHomeMenuIcon />
          <br />
          CallHomeMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.DiagnosticsMenuIcon />
          <br />
          DiagnosticsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.DrivesMenuIcon />
          <br />
          DrivesMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.GroupsMenuIcon />
          <br />
          GroupsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.HealthMenuIcon />
          <br />
          HealthMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.IdentityMenuIcon />
          <br />
          IdentityMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.InspectMenuIcon />
          <br />
          InspectMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.LogsMenuIcon />
          <br />
          LogsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.MenuCollapsedIcon />
          <br />
          MenuCollapsedIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.MenuExpandedIcon />
          <br />
          MenuExpandedIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.MetricsMenuIcon />
          <br />
          MetricsMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.MonitoringMenuIcon />
          <br />
          MonitoringMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.PerformanceMenuIcon />
          <br />
          PerformanceMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.ProfileMenuIcon />
          <br />
          ProfileMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.RegisterMenuIcon />
          <br />
          RegisterMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.SupportMenuIcon />
          <br />
          SupportMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.TraceMenuIcon />
          <br />
          TraceMenuIcon
        </Grid>

        <Grid item xs={3} sm={2} md={1}>
          <micons.UsersMenuIcon />
          <br />
          UsersMenuIcon
        </Grid>
      </Grid>
    </div>
  );
}