Skip to main content
Skip table of contents

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

CODE
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:

CODE
<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>

 

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.