This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0

Material.Icon

Convenience functions for producing Material Design Icons. Refer to the Material Design Icons page, or skip straight to the Material Icons Library.

This implementation assumes that you have

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

or an equivalent means of loading the icons in your HTML header. (Material.top will do this for you.)

i : String -> Html m

Render a default-sized icon with no behaviour. The String argument must be the name of a Material Icon (replace spaces with underscores).

I.e., to produce a default size (24xp) "trending flat" icon:

import Material.Icon as Icon

icon : Html m
icon = Icon.i "trending_flat"
view : String -> List (Property m) -> Html m

View function for icons. Supply the Material Icons Library name as the first argument (replace spaces with underscores). Set the size of the icon with the size.. Styles (default is 24px). Do not use this function to produce clickable icons; use icon buttons in Material.Button.icon for that.

import Material.Icon as Icon

icon : Html m
icon = Icon.view "trending_flat" [Icon.size48]
size18 : Property m

Set icon to have size 18px.

size24 : Property m

Set icon to have size 24px.

size36 : Property m

Set icon to have size 36px.

size48 : Property m

Set icon to have size 48px.

onClick : m -> Property m

Add an on "click" handler to an Icon. (You may want to use a Button with Button.icon instead.)

type alias Property m = Options.Property (Config m) m

Type of Icon properties. (You are unlikely to need this.)

module Material.Icon
    exposing
        ( size18
        , size24
        , size36
        , size48
        , view
        , i
        , onClick
        , Property
        )

{-| Convenience functions for producing Material Design Icons. Refer to
[the Material Design Icons page](https://google.github.io/material-design-icons),
or skip straight to the [Material Icons Library](https://design.google.com/icons/).

This implementation assumes that you have

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

or an equivalent means of loading the icons in your HTML header.
(`Material.top` will do this for you.)

@docs i, view, size18, size24, size36, size48, onClick, Property
-}

import Html exposing (i, text, Html, Attribute)
import Html.Events
import Material.Options as Options exposing (Property, cs, css, styled)


type alias Config m =
    { onClick : Maybe (Attribute m)
    }


{-| Type of Icon properties. (You are unlikely to need this.)
-}
type alias Property m =
    Options.Property (Config m) m


defaultConfig : Config m
defaultConfig =
    { onClick = Nothing
    }


{-| Add an `on "click"` handler to an Icon. (You may want to use a `Button`
with `Button.icon` instead.)
-}
onClick : m -> Property m
onClick x =
    Options.set
        (\config -> { config | onClick = Just (Html.Events.onClick x) })


{-| Set icon to have size 18px.
-}
size18 : Property m
size18 =
    css "font-size" "18px"


{-| Set icon to have size 24px.
-}
size24 : Property m
size24 =
    css "font-size" "24px"


{-| Set icon to have size 36px.
-}
size36 : Property m
size36 =
    css "font-size" "36px"


{-| Set icon to have size 48px.
-}
size48 : Property m
size48 =
    css "font-size" "48px"


{-| View function for icons. Supply the
[Material Icons Library](https://design.google.com/icons/) name as
the first argument (replace spaces with underscores). Set the size of the
icon with the `size..` Styles (default is 24px).  Do not use this function to
produce clickable icons; use icon buttons in Material.Button.icon for that.

    import Material.Icon as Icon

    icon : Html m
    icon = Icon.view "trending_flat" [Icon.size48]
-}
view : String -> List (Property m) -> Html m
view name options =
    let
        summary =
            Options.collect defaultConfig options
    in
        Options.apply summary
            Html.i
            [ cs "material-icons" ]
            (summary.config.onClick
                |> Maybe.map (flip (::) [])
                |> Maybe.withDefault []
            )
            [ text name ]


{-| Render a default-sized icon with no behaviour. The
`String` argument must be the name of a [Material Icon](https://design.google.com/icons/)
(replace spaces with underscores).

I.e., to produce a default size (24xp) "trending flat" icon:

    import Material.Icon as Icon

    icon : Html m
    icon = Icon.i "trending_flat"
-}
i : String -> Html m
i name =
    view name []