Material.IconButton

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

Resources
Basic Usage
Configuration
- Configuration Options
Icon Button
Disabled Icon Button
Labeled Icon Button
Icon Button with Custom Icon
Focus an Icon Button
Icon Button with Menu

Resources

Basic Usage

import Material.IconButton as IconButton


type Msg
    = Clicked


main =
    IconButton.iconButton
        (IconButton.config |> IconButton.setOnClick Clicked)
        (IconButton.icon "favorite")

Configuration

type alias Config msg =

Config msg

Icon button configuration

config : Config msg

Default icon button configuration

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks on an icon button

setDisabled : Bool -> Config msg -> Config msg

Specify whether an icon button is disabled

Disabled icon buttons cannot be interacted with and have no visual interaction effect.

setHref : Maybe String -> Config msg -> Config msg

Specify whether a button is a link button.

Link buttons behave like normal HTML5 anchor tags. Note that link buttons cannot be disabled and ignore that configuration option.

setTarget : Maybe String -> Config msg -> Config msg

Specify the target for a link button.

Note that this configuration option will be ignored by buttons that do not also set setHref.

setLabel : Maybe String -> Config msg -> Config msg

Specify an icon button's HTML5 arial-label attribute

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

setMenu : Maybe (Menu msg) -> Config msg -> Config msg

Specify a menu to attach to the icon button

The icon button is set as the menu's anchor, however opening the menu still requires the use of Menu.setOpen.

Icon Button

iconButton : Config msg -> Icon -> Html msg

Icon button view function

Disabled Icon Button

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

IconButton.iconButton
    (IconButton.config |> IconButton.setDisabled True)
    (IconButton.icon "favorite")

Labeled Icon Button

To set the HTML attribute arial-label of a icon button, use its setLabel configuration option.

IconButton.iconButton
    (IconButton.config
        |> IconButton.setLabel (Just "Add to favorites")
    )
    (IconButton.icon "favorite")

Icon Button with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.

type alias Icon =

Icon

Icon type

icon : String -> Icon

Material Icon

IconButton.iconButton IconButton.config
    (IconButton.icon "favorite")

customIcon :

(List (Attribute Never) -> List (Html Never) -> Html Never)

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

IconButton.iconButton IconButton.config
    (IconButton.customIcon Html.i
        [ class "fab fa-font-awesome" ]
        []
    )

svgIcon : List (Attribute Never) -> List (Html Never) -> Icon

SVG icon

IconButton.iconButton IconButton.config
    (IconButton.svgIcon
        [ Svg.Attributes.viewBox "…" ]
        [-- …
        ]
    )

Focus an Icon Button

You may programatically focus an icon button by assigning an id attribute to it and use Browser.Dom.focus.

IconButton.iconButton
    (IconButton.config
        |> IconButton.setAttributes
            [ Html.Attributes.id "my-icon-button" ]
    )
    (IconButton.icon "wifi")

Icon buttons support opening a menu.

IconButton.iconButton
    (IconButton.config
        |> IconButton.setOnClick (OpenChanged True)
        |> IconButton.setMenu
            (Just <|
                IconButton.menu
                    (Menu.config
                        |> Menu.setOpen True
                        |> Menu.setOnClose (OpenChanged False)
                    )
                    (ListItem.listItem
                        (ListItem.config
                            |> ListItem.setOnClick (OpenChanged False)
                        )
                        [ text "Orange" ]
                    )
                    [ ListItem.listItem
                        (ListItem.config
                            |> ListItem.setOnClick (OpenChanged False)
                        )
                        [ text "Guava" ]
                    ]
            )
    )
    (IconButton.icon "menu_vert")

aforemny/material-components-web-elm/9.1.0