Material UI Display property not hiding content - material-ui

Question

Material UI explains Display in their docs as a way to Quickly and responsively toggle the display value of components!
I have an icon that i want it to be hidden on xs. I am trying
display={{ xs: 'none', sm: 'block' }} its not working.
I am trying display='none' just to see if it hides, also not working. If i set a className={classes.icon} and then i create an icon class in useStyles
icon: {
display: none,
},
the icon is hidden.
The behaviour is making me go crazy but am sure i am missing a concept on how these things rended or something is overriding the behaviour.
Also i dont know how to use display={{ xs: 'none', sm: 'block' }} inside the useStyle as double brackets are not allowed there
Here is full code:
const useStyles = makeStyles((theme) => ({
icon: {
paddingRight: 10,
color: 'white',
display: 'none', //setting this hides the icon
},
}
<Grid item container xs={12}>
<AccountBalanceIcon fontSize='large' className={classes.icon} display={{ xs: 'none', sm: 'block' }}/>
</Grid>

Answer 1

You can hide the AdbIcon when the screen's width becomes xs by using [theme.breakpoints.only("xs")] in the useStyles hook :-
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
[theme.breakpoints.only("xs")]: {
display: "none",
},
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<AdbIcon
fontSize="large"
className={classes.icon}
/>
);
}
Read about all the breakpoint queries that are given by material-ui here

Answer 2

'display' property belongs to 'Box' component, not the Icon component.. I.e. the Icon must be wrapped in the Box component. The following sample works:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
//display: 'none',
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<Box
display="block"
//display="none"
>
<AdbIcon
fontSize="large"
className={classes.icon}
/>
</Box>
);
}