Icon toggles allow users to take actions, and make choices, with a single tap.

Table of Contents

• Resources
• Basic Usage
• Icon Toggle
• On Icon Toggle
• Disabled Icon Toggle
• Labeled Icon Toggle

Resources

• Demo: Icon buttons
• Material Design Guidelines: Toggle buttons
• MDC Web: Icon Button
• Sass Mixins (MDC Web)

Basic Usage

If you are looking for a button that has an icon as well as text, refer to Button.

import Material.IconToggle
    exposing
        ( iconToggle
        , iconToggleConfig
        )


type Msg
    = IconToggleClicked


main =
    iconToggle
        { iconToggleConfig
            | on = True
            , onChange = Just IconToggleClicked
        }
        { offIcon = "favorite_outlined"
        , onIcon = "favorite"
        }

Icon Toggle

Icon toggles are a variant of icon buttons that change their state when clicked.

iconToggle { iconToggleConfig | on = True }
    { offIcon = "favorite_border", onIcon = "favorite" }

On Icon Toggle

To set the state of a icon toggle, set its on configuration field to a Bool value. State only applies to the icon toggle variant, icon buttons ignore this configuration field.

iconToggle { iconToggleConfig | on = True }
    { offIcon = "favorite_border", onIcon = "favorite" }

Disabled Icon Toggle

To disable a icon toggle, set its disabled configuration field to True. Disabled icon buttons cannot be interacted with and have no visual interaction effect.

iconToggle { iconButtonConfig | disabled = True }
    { offIcon = "favorite_border", onIcon = "favorite" }

Labeled Icon Toggle

To set the arial-label attribute of a icon toggle, set its label configuration field to a String.

iconToggle
    { iconButtonConfig | label = "Add to favorites" }
    { offIcon = "favorite_border", onIcon = "favorite" }