Mdl: Material Icon in input field - html

Question

I am looking into a way to get the following (taken from the material website):
I have managed to do get an icon in an input field with Bootstrap using input-group. But I cannot find a good and clear way on how to do this with mdl.
I am using elm but a html/css solution is fine.

Answer 1

I solved it with some css stuff.
passwordIconStyle : Attribute Msg
passwordIconStyle =
style
[ ("position", "absolute")
, ("top", "18px")
, ("right", "5px")
, ("cursor", "pointer")
]
passwordField : Model -> Html Msg
passwordField model =
div [ style [ ("position", "relative") ] ]
[ Textfield.render Mdl [1] model.mdl
[ Textfield.label "Password"
, Textfield.floatingLabel
, Textfield.password
, Textfield.value model.password
, Textfield.error model.passwordError
|> Options.when (not <| isEmpty model.passwordError)
, Options.onInput UpdatePassword
, Options.css "padding-right" "40px"
]
[]
, i [ passwordIconStyle ]
[
visibility Color.gray 25
]
]
result:

Answer 2

I've done an this small example. I hope it can help you.
import Material as Mdl
import Material.Textfield as Textfield
import Html exposing (..)
type alias Model =
{ mdl :
Mdl.Model
}
model : Model
model =
{ mdl =
Mdl.model
-- Boilerplate: model store for any and all Mdl components you use.
}
type Msg
= Mdl (Mdl.Msg Msg)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
-- Boilerplate: Mdl action handler.
Mdl msg_ ->
Mdl.update Mdl msg_ model
view : Model -> Html Msg
view model =
div []
[ Textfield.render Mdl
[ 2 ]
model.mdl
[ Textfield.label "Floating label"
, Textfield.floatingLabel
, Textfield.text_
]
[]
, Textfield.render Mdl
[ 5 ]
model.mdl
[ Textfield.label "Enter password"
, Textfield.floatingLabel
, Textfield.password
]
[]
]
main : Program Never Model Msg
main =
Html.program
{ view = view
, update = update
, subscriptions = \_ -> Sub.none
, init = ( model, Cmd.none )
}
Remember that you have to add to your index.html links to the css of mdl.