@mui/material#FormLabel TypeScript Examples
The following examples show how to use
@mui/material#FormLabel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AdditionalQuestions.tsx From frontend with MIT License | 6 votes |
|
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>
)
}
Example #2
| Source File: Newsletter.tsx From frontend with MIT License | 6 votes |
|
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>
)
}
Example #3
| Source File: OptionsCheck.tsx From ui-schema with MIT License | 6 votes |
|
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>
}
Example #4
| Source File: Settings.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
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>
);
}
Example #5
| Source File: CheckboxButtonGroup.tsx From react-hook-form-mui with MIT License | 4 votes |
|
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>
)
}
Example #6
| Source File: RadioButtonGroup.tsx From react-hook-form-mui with MIT License | 4 votes |
|
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>
)
}
Example #7
| Source File: IconsScreen.tsx From console with GNU Affero General Public License v3.0 | 4 votes |
|
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>
);
}
