Material.IconButton

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

Resources
Basic Usage
Icon Button
Disabled Icon Button
Labeled Icon Button

Resources

Basic Usage

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

import Material.IconButton
    exposing
        ( iconButton
        , iconButtonConfig
        )


type Msg
    = IconButtonClicked


main =
    iconButton
        { iconButtonConfig
            | onClick = Just IconButtonClicked
        }
        "favorite"

Icon Button

iconButton : IconButtonConfig msg -> String -> Html msg

Icon button view function

iconButtonConfig : IconButtonConfig msg

Default icon button configuration

type alias IconButtonConfig msg =

{ disabled : Bool

, label : Maybe String

, additionalAttributes : List (Attribute msg)

, onClick : Maybe msg

}

Icon button configuration

Disabled Icon Button

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

iconButton
    { iconButtonConfig | disabled = True }
    "favorite"

Labeled Icon Button

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

iconButton
    { iconButtonConfig | label = "Add to favorites" }
    "favorite"

Variant: Custom Icon Button

customIconButton : IconButtonConfig msg -> List (Html msg) -> Html msg

TODO

aforemny/material-components-web-elm/2.1.2