MDC

Icon Button

READMEDemo

Components

  • mdc-icon-button
  • mdc-toggle-icon-button

Status

Component Ready to use
mdc-icon-button Nearly Yes
mdc-toggle-icon-button Nearly Yes

Disable Morph

Code
<mdc-icon-button><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button disable-morph><mdc-icon>delete</mdc-icon></mdc-icon-button>

Disabled

Code
<mdc-icon-button><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button disabled><mdc-icon>delete</mdc-icon></mdc-icon-button>

Name

Code
<form>
    <mdc-icon-button name="action" value="edit"><mdc-icon>edit</mdc-icon></mdc-icon-button>
    <mdc-icon-button name="action" value="delete"><mdc-icon>delete</mdc-icon></mdc-icon-button>
</form>

Shape

Code
<mdc-icon-button shape="round"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button shape="square"><mdc-icon>delete</mdc-icon></mdc-icon-button>

Size

Code
<mdc-icon-button size="extra-small"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button size="small"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button size="medium"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button size="large"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button size="extra-large"><mdc-icon>delete</mdc-icon></mdc-icon-button>

Type

Code
<form>
    <mdc-icon-button variant="filled" type="submit"><mdc-icon>save</mdc-icon></mdc-icon-button>
    <mdc-icon-button variant="outlined" type="reset"><mdc-icon>refresh</mdc-icon></mdc-icon-button>
    <mdc-icon-button variant="standard" type="button"><mdc-icon>info</mdc-icon></mdc-icon-button>
</form>

Value

Code
<form>
    <mdc-icon-button name="choice" value="apple"><mdc-icon>apple</mdc-icon></mdc-icon-button>
    <mdc-icon-button name="choice" value="banana"><mdc-icon>banana</mdc-icon></mdc-icon-button>
</form>

Variant

Code
<mdc-icon-button variant="filled"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button variant="filled-tonal"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button variant="outlined"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button variant="standard"><mdc-icon>delete</mdc-icon></mdc-icon-button>

Width

Code
<mdc-icon-button width="narrow"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button width="default"><mdc-icon>delete</mdc-icon></mdc-icon-button>

<mdc-icon-button width="wide"><mdc-icon>delete</mdc-icon></mdc-icon-button>

Checked

Code
<mdc-toggle-icon-button variant="filled">
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>

<mdc-toggle-icon-button variant="filled" default-checked>
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>

Required

Code
<mdc-toggle-icon-button variant="filled" required>
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>

<mdc-toggle-icon-button variant="filled" required default-checked>
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>

Type

Code
<mdc-toggle-icon-button variant="filled" type="checkbox" default-checked>
    <mdc-icon>bookmark</mdc-icon>
</mdc-toggle-icon-button>

<form>
    <mdc-toggle-icon-button variant="filled" type="radio" name="rgi" value="a" default-checked>
        <mdc-icon>format_align_left</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled" type="radio" name="rgi" value="b">
        <mdc-icon>format_align_center</mdc-icon>
    </mdc-toggle-icon-button>
</form>

Value

Code
<mdc-toggle-icon-button variant="filled" type="checkbox" value="on" default-checked>
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>

<mdc-toggle-icon-button variant="filled" type="checkbox" value="liked" default-checked>
    <mdc-icon>favorite</mdc-icon>
</mdc-toggle-icon-button>