Add icon view.

elm.json

@@ -12,6 +12,7 @@
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
             "elm/json": "1.1.2",
+            "elm/svg": "1.0.1",
             "elm/url": "1.0.0"
         },
         "indirect": {

src/Scylla/Views.elm

@@ -3,6 +3,8 @@ import Scylla.Model exposing (..)
 import Scylla.Sync exposing (..)
 import Scylla.Route exposing (..)
 import Scylla.Fnv as Fnv
+import Svg
+import Svg.Attributes
 import Url.Builder
 import Json.Decode as Decode
 import Html exposing (Html, div, input, text, button, div, span, a, h2, table, td, tr)
@@ -98,7 +100,7 @@ joinedRoomView m roomId jr =
                 , onInput <| ChangeRoomText roomId
                 , value <| Maybe.withDefault "" <| Dict.get roomId m.roomText
                 ]  []
-            , button [ onClick <| SendRoomText roomId ] [ text "Send" ]
+            , button [ onClick <| SendRoomText roomId ] [ iconView "send" ]
             ]
     in
         div [ class "room-wrapper" ]
@@ -107,6 +109,15 @@ joinedRoomView m roomId jr =
             , messageInput
             ]
 
+iconView : String -> Html Msg
+iconView name =
+    let
+        url = Url.Builder.absolute [ "static", "svg", "feather-sprite.svg" ] [] 
+    in
+        Svg.svg
+            [ Svg.Attributes.class "feather-icon"
+            ] [ Svg.use [ Svg.Attributes.xlinkHref (url ++ "#" ++ name) ] [] ]
+
 eventWrapperView : Model -> List (Html Msg) -> Html Msg
 eventWrapperView m es = div [ class "events-wrapper" ] [ table [ class "events-table" ] es ]
 

static/scss/style.scss

@@ -155,3 +155,16 @@ span.sender-wrapper {
     padding-right: 5px;
     float: right;
 }
+
+/**
+ * Icons
+ */
+.feather-icon {
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    height: 20px;
+    width: 20px;
+}