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

Table of Contents

• Resources
• Configuration
  • Configuration Options
• 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

import Material.IconToggle as IconToggle


type Msg
    = Clicked


main =
    IconToggle.iconToggle
        (IconToggle.config
            |> IconToggle.setOn True
            |> IconToggle.setOnChange Clicked
        )
        { offIcon = "favorite_outlined"
        , onIcon = "favorite"
        }

Configuration

Configuration Options

Icon Toggle

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

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setOn True)
    { offIcon = "favorite_border"
    , onIcon = "favorite"
    }

On Icon Toggle

To set an icon toggle to its on state, set its setOn configuration option to True.

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setOn True)
    { offIcon = "favorite_border"
    , onIcon = "favorite"
    }

Disabled Icon Toggle

To disable an icon toggle, set its setDisabled configuration option to True. Disabled icon buttons cannot be interacted with and have no visual interaction effect.

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setDisabled True)
    { offIcon = "favorite_border"
    , onIcon = "favorite"
    }

Labeled Icon Toggle

To set the HTML5 arial-label attribute of an icon toggle, use its setLabel configuration option.

IconToggle.iconToggle
    (IconToggle.config
        |> IconToggle.setLabel (Just "Add to favorites")
    )
    { offIcon = "favorite_border"
    , onIcon = "favorite"
    }