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
type Msg
= Interacted
main =
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just (SelectIcon.icon "favorite"))
)
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
Select.filled
(Select.config
|> Select.setLeadingIcon
(Just (Select.icon "favorite"))
)
customIcon : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> Icon msg
Custom icon
Select.raised
(Select.config
|> Select.setLeadingIcon
(Just
(Select.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)
svgIcon : List (Svg.Attribute msg) -> List (Svg msg) -> Icon msg
SVG icon
Select.raised
(Select.config
|> Select.setLeadingIcon
(Just
(Select.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
SelectIcon.icon "favorite"
|> SelectIcon.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.
SelectIcon.icon "favorite"
|> SelectIcon.setDisabled True