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.
Material Icon
TextField.filled
(TextField.config
|> TextField.setLeadingIcon
(Just (TextField.icon "favorite"))
)Custom icon
TextField.raised
(TextField.config
|> TextField.setLeadingIcon
(Just
(TextField.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)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.
Specify a message when the user interacts with the icon
TextFieldIcon.icon "favorite"
|> TextFieldIcon.setOnInteraction InteractedTo disable an icon, set its setDisabled configuration option to True.
Specify an icon to be disabled
Disabled icons cannot be interacted with and have no visual interaction effect.
TextFieldIcon.icon "favorite"
|> TextFieldIcon.setDisabled True
Icon type