Icon Button
The Icon Button component is a button represented as an icon. It functions the same way as the button component.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| type | button reset submit | button | Specifies the type of icon button. |
| disabled | bool | false | If true, the icon button is disabled. |
| href | string | A URL to navigate to after pressing the icon button. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| fontColor | default inherit primary secondary string | default | Defines the font color of the icon button. |
| size | small medium large | medium | Defines the size of the icon button. |
| fullWidth | bool | false | If true, the icon button takes up the full width of its container. |
| disableElevation | bool | false | If true, the icon button will sit flat on the background surface. |
| disableFocusRipple | bool | false | If true, the keyboard focus ripple is disabled. |
| disableRipple | bool | false | If true, the ripple effect is disabled. |
Subcomponents
The Icon Button component has one subcomponent that uses an icon as a button face.
Icon
The Icon component allows the user to select an icon to place on the icon button.
For further details, see the Icon component.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large string | small | Defines the size of the icon. |
| viewBox | 0 0 24 24 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |