Text field icons can either be leading or trailing icons, and can be purely cosmetic or can be interacted with.
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
)
)
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
Internal.Icon msg
Icon type
icon : String -> Icon msg
Material Icon
TextField.filled
(TextField.config
|> TextField.setLeadingIcon
(Just (TextField.icon "favorite"))
)
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" ]
[]
)
)
)
svgIcon : List (Svg.Attribute msg) -> List (Svg msg) -> Icon msg
SVG icon
TextField.raised
(TextField.config
|> TextField.setLeadingIcon
(Just
(TextField.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
)
)
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
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