aforemny / material-components-web-elm / Material.TextField.Icon

Text field icons can either be leading or trailing icons, and can be purely cosmetic or can be interacted with.

Table of Contents

Resources

Basic Usage

import Material.TextField as TextField
import Material.TextField.Icon as TextFieldIcon

type Msg
    = Interacted

main =
    TextField.filled
        (TextField.config
            |> TextField.setLeadingIcon
                (Just (TextFieldIcon.icon "favorite"))
            |> TextField.setTrailingIcon
                (Just (TextFieldIcon.icon "favorite")
                    |> TextFieldIcon.setOnInteraction
                        Interacted
                )
        )

Icon

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


type alias Icon msg =
Internal.Icon msg

Icon type

icon : String -> Icon msg

Material Icon

TextField.filled
    (TextField.config
        |> TextField.setLeadingIcon
            (Just (TextField.icon "favorite"))
    )

Custom Icon

customIcon : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> Icon msg

Custom icon

TextField.raised
    (TextField.config
        |> TextField.setLeadingIcon
            (Just
                (TextField.customIcon Html.i
                    [ class "fab fa-font-awesome" ]
                    []
                )
            )
    )

SVG Icon

svgIcon : List (Svg.Attribute msg) -> List (Svg msg) -> Icon msg

SVG icon

TextField.raised
    (TextField.config
        |> TextField.setLeadingIcon
            (Just
                (TextField.svgIcon
                    [ Svg.Attributes.viewBox "…" ]
                    [-- …
                    ]
                )
            )
    )

Interactive Icon

To be able to interact with an icon, set its setOnInteraction configuration option to the message that should be dispatched.

setOnInteraction : msg -> Icon msg -> Icon msg

Specify a message when the user interacts with the icon

TextFieldIcon.icon "favorite"
    |> TextFieldIcon.setOnInteraction Interacted

Disabled Icon

To disable an icon, set its setDisabled configuration option to True.

setDisabled : Basics.Bool -> Icon msg -> Icon msg

Specify an icon to be disabled

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

TextFieldIcon.icon "favorite"
    |> TextFieldIcon.setDisabled True