Changes Icon to use Style

src/Material/Icon.elm

@@ -1,5 +1,6 @@
 module Material.Icon
   ( Size(..)
+  , iconSize
   , view
   , i
   ) where
@@ -15,12 +16,13 @@ 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, Size, iconSize
 -}
 
 
 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.,
@@ -30,12 +32,26 @@ type Size
   = S18 | S24 | S36 | S48 | S
 
 
+{-| Icon size styling. This style can be omitted for the default size style `S`. 
+-}
+iconSize : Size -> Style
+iconSize size = 
+      case size of
+        S18 -> cs "md-18"
+        S24 -> cs "md-24"
+        S36 -> cs "md-36"
+        S48 -> cs "md-48"
+        S -> cs ""
+
+
 {-| 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,24 +59,19 @@ no attributes:
     import Material.Icon as Icon
 
     icon : Html
-    icon = Icon.view "trending_flat" Icon.S48 []
+    icon = Icon.view "trending_flat" [Icon.iconSize Icon.S48] []
 
 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/)
 (replace spaces with underscores).
@@ -73,4 +84,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 [] []