Select icons can either be leading or trailing icons, and can be purely cosmetic or can be interacted with.
import Material.Select as Select
import Material.Select.Icon as SelectIcon
import Material.Select.Item as SelectItem
type Msg
= Interacted
main =
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just (SelectIcon.icon "favorite"))
)
(SelectItem.selectItem
(SelectItem.config { value = "" })
""
)
[]This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
Material Icon
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just (SelectIcon.icon "favorite"))
)Custom icon
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just
(SelectIcon.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)SVG icon
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just
(SelectIcon.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
SelectIcon.icon "favorite"
|> SelectIcon.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.
SelectIcon.icon "favorite"
|> SelectIcon.setDisabled True
Icon type