MDL：私は取得する方法を検討しています

Question

入力フィールドに、素材のアイコン（材料ウェブサイトから取られた）次：私が管理している

は、入力フィールドでのアイコンを取得行うには入力グループを使用するブートストラップしかし、私はmdlでこれをどうやって行うかについて、良い、明確な方法を見つけることができません。

私はelmを使用していますが、html/cssソリューションは問題ありません。

Answer 1

私はいくつかのCSSのものでそれを解決しました。

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 
      ] 
     ] 

結果：

Answer 2

私はthis小さな例を行った。それがあなたを助けることを願っています。

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) 
     } 

あなたがmdlのCSSへのごindex.htmlリンクに追加することが必要であることを忘れないでください。