IconButton
Overview
Same as Button , IconButton is simply the button with an icon to trigger an action. It can support you in importing Icon to the Button, adjusting the size flexibly, and a wide range of things listed on the properties panel of IconButton.
Please refer to this for more information: https://mui.com/material-ui/api/icon-button/.
Import
import { IconButton } from '@mui/material';
The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.
Property
Property:
Name | Default | Description |
Id-name | Placeholder: <id-name> | The Id-name of the created component. |
State | State: Normal | The State of the created Component. |
Margin and Padding | Size Unit: Px | The component Margin and Padding with many selectable Size Units. |
Size | Type: None Size Unit: Px | The component Size includes Width and Height with many selectable Size Units, and Type. |
Layout | Position: None Size Unit: Px | The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units. |
Icon | Icon: Disabled | The component Icon includes Icon and File upload Button. |
General | Visibility: None Disabled: False Opacity: 100% | The component General includes Visibility, Disabled, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample:
<IconButton
sx={{':active': {'margin': '15px 25px 25px','padding': '15px 25px 15px 15px',
'width': '25px','height': '25px',
'position': 'fixed','top': '15px','right': '15px','bottom': '10px','left': '15px',
'visibility': 'hidden',
'opacity': 0.57,
'backgroundColor': '#f55050ff',},}}
size="small"
disabled={true}>
<img alt="Image" src={Icon800pxSignCheckIconCopy}/>
</IconButton>