Merge pull request #15 from hakonrossebo/iconStyles

Icon changed to implement Style

examples/Demo/Badges.elm

@@ -4,7 +4,7 @@ import Html exposing (..)
 import Html.Attributes exposing (class, style, key)
 import Material.Badge as Badge
 import Material.Style exposing (..)
-
+import Material.Icon as Icon
 -- VIEW
 
 view : List Html
@@ -23,5 +23,7 @@ view = [  div [][p [][]
         , p [][]
         , styled span  [Badge.withBadge "Δ"]  [ ] [ text "Span with HTML symbol - Delta" ]
         , p [][]
+        , span [][text "Icon with badge"]
+        , Icon.view "face" [Icon.size24, Badge.withBadge "33", Badge.overlap ] []
     ]
   ]

src/Material/Icon.elm

@@ -1,5 +1,5 @@
 module Material.Icon
-  ( Size(..)
+  ( size18, size24, size36, size48
   , view
   , i
   ) where
@@ -15,27 +15,46 @@ This implementation assumes that you have
 
 or an equivalent means of loading the icons in your HTML header.
 
-@docs i, Size, view
+@docs i, view, size18, size24, size36, size48
 -}
 
 
 import Html exposing (i, text, Html, Attribute)
 import Html.Attributes exposing (class)
+import Material.Style exposing (Style, cs, styled)
 
-
-{-| Size of an icon. Constructors indicate their pixel size, i.e.,
-`S18` is 18px. The constructor `S` gives you the default size, 24px.
+{-| Icon size styling to indicate their pixel size. This style gives a size of 18px. 
 -}
-type Size
-  = S18 | S24 | S36 | S48 | S
+size18 :  Style
+size18 = 
+  cs "md-18"
 
+{-| Icon size styling to indicate their pixel size. This style gives a size of 24px. 
+-}
+size24 :  Style
+size24 = 
+  cs "md-24"
+
+{-| Icon size styling to indicate their pixel size. This style gives a size of 36px. 
+-}
+size36 :  Style
+size36 = 
+  cs "md-36"
+
+{-| Icon size styling to indicate their pixel size. This style gives a size of 48px. 
+-}
+size48 :  Style
+size48 = 
+  cs "md-48"
 
 {-| View function for icons. Supply the
 [Material Icons Library](https://design.google.com/icons/) name as
 the first argument (replace spaces with underscores); and the size of the icon
-as the second. Do not use this function to produce clickable icons; use
+as the second (as a list of styles). Do not use this function to produce clickable icons; use
 icon buttons in Material.Button for that.
 
+If you doesn't specify any style size, it gives you the default size, 24px.
+
 I.e., to produce a 48px
 ["trending flat"](https://design.google.com/icons/#ic_trending_flat) icon with
 no attributes:
@@ -43,23 +62,18 @@ no attributes:
     import Material.Icon as Icon
 
     icon : Html
-    icon = Icon.view "trending_flat" Icon.S48 []
+    icon = Icon.view "trending_flat" [Icon.size48] []
 
 This function will override any `class` set in `List Attribute`.
 -}
-view : String -> Size -> List Attribute -> Html
-view name size attrs =
-  let
-    sz =
-      case size of
-        S18 -> " md-18"
-        S24 -> " md-24"
-        S36 -> " md-36"
-        S48 -> " md-48"
-        S -> ""
-  in
-    Html.i (class ("material-icons" ++ sz) :: attrs) [text name]
-
+view : String -> List Style -> List Attribute-> Html
+view name styling attrs=
+  styled Html.i
+    (  cs "material-icons"
+    :: styling
+    )
+    attrs
+    [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/)
@@ -73,4 +87,4 @@ I.e., to produce a default size (24xp) "trending flat" icon:
     icon = Icon.i "trending_flat"
 -}
 i : String -> Html
-i name = view name S []
+i name = view name [] []

src/Material/Layout.elm

@@ -264,7 +264,7 @@ tabsView addr model tabs =
               , ("mdl-layout__tab-bar-" ++ direction ++ "-button", True)
               ]
           ]
-          [ Icon.view ("chevron_" ++ direction) Icon.S
+          [ Icon.view ("chevron_" ++ direction) [Icon.size24]
               [onClick addr (ScrollTab offset)]
                 -- TODO: Scroll event
           ]