Skip to main content

Icon Button

The Icon Button component is a button represented as an icon. It functions the same way as the button component.

Properties

NameTypeDefaultDescription
typebutton
reset
submit
buttonSpecifies the type of icon button.
disabledboolfalseIf true, the icon button is disabled.
hrefstringA URL to navigate to after pressing the icon button.

Style Attributes

NameTypeDefaultDescription
fontColordefault
inherit
primary
secondary
string
defaultDefines the font color of the icon button.
sizesmall
medium
large
mediumDefines the size of the icon button.
fullWidthboolfalseIf true, the icon button takes up the full width of its container.
disableElevationboolfalseIf true, the icon button will sit flat on the background surface.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf 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

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.
on this page
Was this article useful?
89% of our users said this content was useful.