Update to new FontAwesome version, add semantic Icon layer for consistency.

2022-05-30 16:16:03 +01:00
parent 08a61e6d6c
commit a6035da2e6
43 changed files with 728 additions and 319 deletions
@@ -21,7 +21,7 @@
            "elm-community/list-extra": "8.5.2",
            "elm-community/random-extra": "3.2.0",
            "fapian/elm-html-aria": "1.4.0",
-            "lattyware/elm-fontawesome": "5.0.0",
+            "lattyware/elm-fontawesome": "6.0.0",
            "lattyware/elm-json-diff": "1.0.2",
            "myrho/elm-round": "1.0.4",
            "norpan/elm-html5-drag-drop": "3.1.4",
@@ -9,7 +9,7 @@
      "version": "2.0.0",
      "license": "AGPL-3.0-or-later",
      "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.1",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@material/card": "^14.0.0",
        "@material/mwc-button": "^0.26.1",
        "@material/mwc-fab": "^0.26.1",
@@ -338,15 +338,27 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
-      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
      "hasInstallScript": true,
      "engines": {
        "node": ">=6"
      }
    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -11677,10 +11689,18 @@
      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
      "dev": true
    },
-    "@fortawesome/fontawesome-free": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
-      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
    },
    "@leichtgewicht/ip-codec": {
      "version": "2.0.4",
@@ -22,7 +22,7 @@
    "> 0.2%"
  ],
  "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@material/card": "^14.0.0",
    "@material/mwc-button": "^0.26.1",
    "@material/mwc-fab": "^0.26.1",
@@ -5,9 +5,8 @@ module MassiveDecks.Card.Call.Editor exposing
    , view
    )

-import FontAwesome.Icon as Icon
+import FontAwesome as Icon
 import FontAwesome.Layering as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -19,6 +18,7 @@ import MassiveDecks.Card.Parts as Parts exposing (Parts)
 import MassiveDecks.Card.Parts.Part as Part
 import MassiveDecks.Components.Form as Form
 import MassiveDecks.Components.Form.Message as Message
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Strings as Strings exposing (MdString)
 import MassiveDecks.Strings.Languages as Lang
@@ -134,8 +134,8 @@ view wrap shared { parts, selected, error } =

        inlineControls =
            Html.p []
-                [ Button.view shared Button.Outlined Strings.AddText Strings.AddText (Icon.plus |> Icon.viewIcon) [ addAction (Parts.Text "..." Part.NoStyle) |> HtmlE.onClick ]
-                , Button.view shared Button.Outlined Strings.AddSlot Strings.AddSlot (Icon.plus |> Icon.viewIcon) [ addSlot |> HtmlE.onClick ]
+                [ Button.view shared Button.Outlined Strings.AddText Strings.AddText (Icon.add |> Icon.view) [ addAction (Parts.Text "..." Part.NoStyle) |> HtmlE.onClick ]
+                , Button.view shared Button.Outlined Strings.AddSlot Strings.AddSlot (Icon.add |> Icon.view) [ addSlot |> HtmlE.onClick ]
                ]

        selectedPart =
@@ -180,7 +180,7 @@ view wrap shared { parts, selected, error } =
                    Html.nothing

        viewError e =
-            Message.errorWithFix e [ { description = Strings.AddSlot, icon = Icon.plus, action = addSlot } ]
+            Message.errorWithFix e [ { description = Strings.AddSlot, icon = Icon.add, action = addSlot } ]
                |> Message.view shared
    in
    Html.div [ HtmlA.class "call-editor" ]
@@ -243,17 +243,17 @@ controls wrap shared max selected =
            index |> Maybe.andThen (\i -> Move i by |> wrap |> Maybe.justIf (test i))

        generalControls =
-            [ IconButton.view shared Strings.Remove (Icon.minus |> Icon.present |> NeList.just) (index |> Maybe.map (Remove >> wrap))
-            , IconButton.view shared Strings.MoveLeft (Icon.arrowLeft |> Icon.present |> NeList.just) (move -1 ((<) 0))
-            , IconButton.view shared Strings.MoveRight (Icon.arrowRight |> Icon.present |> NeList.just) (move 1 ((>) max))
+            [ IconButton.view shared Strings.Remove (Icon.remove |> NeList.just) (index |> Maybe.map (Remove >> wrap))
+            , IconButton.view shared Strings.MoveLeft (Icon.left |> NeList.just) (move -1 ((<) 0))
+            , IconButton.view shared Strings.MoveRight (Icon.right |> NeList.just) (move 1 ((>) max))
            ]

        setIfDifferent old updated new =
            index |> Maybe.andThen (\i -> Set i (updated new) |> wrap |> Maybe.justIf (old /= new))

        styleControls setStyle =
-            [ IconButton.view shared Strings.Normal (Icon.font |> Icon.present |> NeList.just) (setStyle Part.NoStyle)
-            , IconButton.view shared Strings.Emphasise (Icon.italic |> Icon.present |> NeList.just) (setStyle Part.Em)
+            [ IconButton.view shared Strings.Normal (Icon.normalText |> NeList.just) (setStyle Part.NoStyle)
+            , IconButton.view shared Strings.Emphasise (Icon.italicText |> NeList.just) (setStyle Part.Em)
            ]

        transformControls setTransform =
@@ -3,8 +3,7 @@ module MassiveDecks.Card.Source.BuiltIn exposing
    , methods
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Card.Source.BuiltIn.Model exposing (..)
@@ -122,7 +121,7 @@ editor selected shared existing update _ _ =
                    , icon = Nothing
                    , primary = [ Html.text name ]
                    , secondary = Just secondary
-                    , meta = Icon.check |> Icon.viewIcon |> Maybe.justIf (existing |> List.any matches)
+                    , meta = Icon.accept |> Icon.view |> Maybe.justIf (existing |> List.any matches)
                    }
            in
            Html.div [ HtmlA.class "primary" ]
@@ -189,4 +188,4 @@ tooltip id renderTooltip =

 logo : () -> Maybe (Html msg)
 logo () =
-    Icon.massiveDecks |> Icon.viewIcon |> Just
+    Icon.massiveDecks |> Icon.view |> Just
@@ -3,8 +3,7 @@ module MassiveDecks.Card.Source.JsonAgainstHumanity exposing
    , methods
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import List.Extra as List
@@ -12,6 +11,7 @@ import MassiveDecks.Card.Source.JsonAgainstHumanity.Model exposing (..)
 import MassiveDecks.Card.Source.Methods as Source
 import MassiveDecks.Card.Source.Model as Source
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Lobby.Configure.Decks.Model exposing (DeckOrError)
 import MassiveDecks.Strings as Strings exposing (MdString)
@@ -107,7 +107,7 @@ editor selected shared existing update _ _ =
                    , icon = Nothing
                    , primary = [ Html.text d.name ]
                    , secondary = Nothing
-                    , meta = Icon.check |> Icon.viewIcon |> Maybe.justIf (existing |> List.any matches)
+                    , meta = Icon.accept |> Icon.view |> Maybe.justIf (existing |> List.any matches)
                    }
            in
            Html.span [ HtmlA.id "json-against-humanity-editor", HtmlA.class "primary" ]
@@ -151,4 +151,4 @@ tooltip givenId tooltipRender =

 logo : () -> Maybe (Html msg)
 logo () =
-    Icon.code |> Icon.viewIcon |> Just
+    Icon.jsonAgainstHumanity |> Icon.view |> Just
@@ -3,8 +3,7 @@ module MassiveDecks.Card.Source.ManyDecks exposing
    , methods
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -13,6 +12,7 @@ import MassiveDecks.Card.Source.ManyDecks.Model exposing (..)
 import MassiveDecks.Card.Source.Methods as Source
 import MassiveDecks.Card.Source.Model as Source
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Lobby.Configure.Decks.Model exposing (DeckOrError)
 import MassiveDecks.Strings as Strings exposing (MdString)
@@ -127,7 +127,7 @@ tooltip dc tooltipRender =

        content =
            [ Html.p [ HtmlA.class "source-id" ]
-                [ logoInternal
+                [ Icon.manyDecks |> Icon.view
                , Html.div [ HtmlA.class "many-decks-deck-code" ] [ dc |> toString |> Html.text ]
                ]
            ]
@@ -137,9 +137,4 @@ tooltip dc tooltipRender =

 logo : () -> Maybe (Html msg)
 logo () =
-    logoInternal |> Just
-
-
-logoInternal : Html msg
-logoInternal =
-    Icon.boxOpen |> Icon.viewIcon
+    Icon.manyDecks |> Icon.view |> Just
@@ -12,11 +12,11 @@ module MassiveDecks.Components.Form.Message exposing
    , warning
    )

+import FontAwesome as Icon exposing (Icon)
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon exposing (Icon)
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Models.MdError as MdError exposing (MdError)
 import MassiveDecks.Strings exposing (MdString)
@@ -28,7 +28,7 @@ import Svg.Attributes as Svg

 type alias Fix msg =
    { description : MdString
-    , icon : Icon
+    , icon : Icon Icon.WithoutId
    , action : msg
    }

@@ -120,16 +120,16 @@ internalMessage shared { severity, description, fixes } =
        ( class, icon ) =
            case severity of
                Info ->
-                    ( "info", Icon.infoCircle )
+                    ( "info", Icon.info )

                Warning ->
-                    ( "warning", Icon.exclamationTriangle )
+                    ( "warning", Icon.warning )

                Error ->
-                    ( "inline-error", Icon.exclamationCircle )
+                    ( "inline-error", Icon.bug )
    in
    Html.span [ HtmlA.class class ]
-        [ Icon.viewStyled [ Icon.fw, Svg.class "message-type-icon" ] icon
+        [ icon |> Icon.styled [ Icon.fw, Svg.class "message-type-icon" ] |> Icon.view
        , Html.span [] [ description |> Lang.html shared ]
        , Html.ul [ HtmlA.class "fixes" ] (fixes |> List.map (viewFix shared))
        ]
@@ -137,4 +137,4 @@ internalMessage shared { severity, description, fixes } =

 viewFix : Shared -> Fix msg -> Html msg
 viewFix shared { icon, description, action } =
-    Html.li [] [ IconButton.view shared description (icon |> Icon.present |> NeList.just) (Just action) ]
+    Html.li [] [ IconButton.view shared description (icon |> NeList.just) (Just action) ]
@@ -6,7 +6,7 @@ module MassiveDecks.Components.Menu exposing
    , view
    )

-import FontAwesome.Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Attributes.Aria as HtmlA
@@ -45,14 +45,14 @@ open isOpen =

 {-| Convenience function for a menu button.
 -}
-button : Icon -> MdString -> MdString -> Maybe msg -> Part msg
+button : Icon Icon.WithoutId -> MdString -> MdString -> Maybe msg -> Part msg
 button icon text description action =
    Button (Item icon text description) action


 {-| Convenience function for a menu link.
 -}
-link : Icon -> MdString -> MdString -> Maybe String -> Part msg
+link : Icon Icon.WithoutId -> MdString -> MdString -> Maybe String -> Part msg
 link icon text description href =
    Link (Item icon text description) href

@@ -6,7 +6,7 @@ module MassiveDecks.Components.Menu.Model exposing
    , State(..)
    )

-import FontAwesome.Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import MassiveDecks.Strings exposing (MdString)


@@ -28,7 +28,7 @@ type Part msg
 {-| A menu item
 -}
 type alias Item =
-    { icon : Icon
+    { icon : Icon Icon.WithoutId
    , text : MdString
    , description : MdString
    }
@@ -1,12 +1,12 @@
 module MassiveDecks.Error.Overlay exposing (init, update, view)

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Error as Error
 import MassiveDecks.Error.Messages exposing (..)
 import MassiveDecks.Error.Model as Error
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Messages as Global
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Route exposing (Route)
@@ -32,11 +32,11 @@ view shared route model =
            [ Html.div [ HtmlA.class "actions" ]
                [ IconButton.view shared
                    Strings.Close
-                    (Icon.times |> Icon.present |> NeList.just)
+                    (Icon.close |> NeList.just)
                    (Clear |> Global.ErrorMsg |> Just)
                , IconButton.view shared
                    Strings.Refresh
-                    (Icon.redo |> Icon.present |> NeList.just)
+                    (Icon.redo |> NeList.just)
                    (Just Global.Refresh)
                ]
            , Card.view [ HtmlA.class "help" ]
@@ -11,9 +11,8 @@ module MassiveDecks.Game exposing
 import Browser.Dom as Dom
 import Browser.Events as Browser
 import Dict exposing (Dict)
+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -39,6 +38,7 @@ import MassiveDecks.Game.Round.Revealing as Revealing
 import MassiveDecks.Game.Round.Starting as Starting
 import MassiveDecks.Game.Rules as Rules
 import MassiveDecks.Game.Time as Time exposing (Time)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Notifications as Notifications
 import MassiveDecks.Pages.Lobby.Actions as Actions
@@ -1177,7 +1177,7 @@ viewWinner wrapLobby shared users localUser winners =
                    Button.Raised
                    Strings.ConfigureNextGame
                    Strings.ConfigureNextGame
-                    (Icon.cog |> Icon.viewIcon)
+                    (Icon.configure |> Icon.view)
                    [ HtmlA.id "new-game-config"
                    , Lobby.Configure |> Just |> Lobby.ChangeSection |> wrapLobby |> HtmlE.onClick
                    ]
@@ -1186,7 +1186,7 @@ viewWinner wrapLobby shared users localUser winners =
                Html.nothing
    in
    [ Card.view [ HtmlA.id "game-winner" ]
-        [ Html.span [] [ Icon.trophy |> Icon.viewIcon ]
+        [ Html.span [] [ Icon.win |> Icon.view ]
        , Html.ul [] (winners |> Set.toList |> List.map (viewWinnerListItem shared users))
        ]
    , configureNextGame
@@ -1244,7 +1244,7 @@ viewRound wrap shared auth timeAnchor config users model =
    [ Html.div [ HtmlA.id "top-content" ]
        [ case instruction |> Maybe.andThen (Maybe.justIf model.helpVisible) of
            Just i ->
-                Card.view [ HtmlA.class "help" ] [ Icon.questionCircle |> Icon.viewIcon, i |> Lang.html shared ]
+                Card.view [ HtmlA.class "help" ] [ Icon.info |> Icon.view, i |> Lang.html shared ]

            Nothing ->
                Html.nothing
@@ -1257,7 +1257,7 @@ viewRound wrap shared auth timeAnchor config users model =

    -- TODO: Hide this when at top. Waiting on native elm scroll events, as currently we'd have to ping constantly.
    , Html.div [ HtmlA.class "scroll-top" ]
-        [ IconButton.view shared Strings.ScrollToTop (Icon.arrowUp |> Icon.present |> NeList.just) (ScrollToTop |> wrap |> Just) ]
+        [ IconButton.view shared Strings.ScrollToTop (Icon.toTop |> NeList.just) (ScrollToTop |> wrap |> Just) ]
    , renderDiscarded wrap shared config users model.discarded |> Maybe.withDefault Html.nothing
    ]

@@ -1282,7 +1282,7 @@ renderDiscarded wrap shared config users discarded =
                        Button.Standard
                        Strings.Accept
                        Strings.Accept
-                        (Icon.check |> Icon.viewIcon)
+                        (Icon.accept |> Icon.view)
                        [ DismissDiscard |> wrap |> HtmlE.onClick ]
                    ]
                ]
@@ -1297,13 +1297,13 @@ toggleHelp wrap shared enabled =
    let
        extra =
            if enabled then
-                [ Icon.slash |> Icon.present |> Icon.styled [ Icon.fw ] ]
+                [ Icon.slash |> Icon.styled [ Icon.fw ] ]

            else
                []

        icon =
-            Icon.question |> Icon.present |> Icon.styled [ Icon.fw ] |> NeList.just |> NeList.extend extra
+            Icon.help |> Icon.styled [ Icon.fw ] |> NeList.just |> NeList.extend extra
    in
    IconButton.view shared Strings.ViewHelpAction icon (ToggleHelp |> wrap |> Just)

@@ -1408,7 +1408,7 @@ minorActions wrap shared auth game helpEnabled =
            if timedOut && game.rules.stages.mode == Rules.Soft then
                IconButton.view shared
                    Strings.EnforceTimeLimitAction
-                    (Icon.forward |> Icon.present |> NeList.just)
+                    (Icon.skip |> NeList.just)
                    (EnforceTimeLimit |> wrap |> Just)
                    |> Just

@@ -1441,7 +1441,7 @@ discardButton wrap shared game =
    in
    IconButton.view shared
        Strings.Discard
-        (Icon.trash |> Icon.present |> NeList.just)
+        (Icon.discard |> NeList.just)
        action


@@ -1449,7 +1449,7 @@ historyButton : (Msg -> msg) -> Shared -> Html msg
 historyButton wrap shared =
    IconButton.view shared
        Strings.ViewGameHistoryAction
-        (Icon.history |> Icon.present |> NeList.just)
+        (Icon.history |> NeList.just)
        (ToggleHistoryView |> wrap |> Just)


@@ -1465,7 +1465,7 @@ rebootButton wrap shared score reboot =
    in
    IconButton.view shared
        ({ cost = reboot.cost } |> Strings.HouseRuleRebootAction)
-        (Icon.random |> Icon.present |> NeList.just)
+        (Icon.random |> NeList.just)
        action


@@ -1,11 +1,11 @@
 module MassiveDecks.Game.Action exposing (view)

-import FontAwesome.Icon as Icon exposing (Icon)
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Game.Action.Model exposing (..)
 import MassiveDecks.Game.Messages as Game exposing (Msg)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Strings as Strings exposing (MdString)
 import Material.Fab as Fab
@@ -41,39 +41,39 @@ viewSingle wrap shared visible action =
        { icon, attrs, type_, title, onClick } =
            case action of
                PickCall ->
-                    IconView Icon.check blocking Fab.Normal Strings.PickCall Game.Submit
+                    IconView Icon.accept blocking Fab.Normal Strings.PickCall Game.Submit

                EditCall ->
-                    IconView Icon.pencilAlt blocking Fab.Normal Strings.WriteCall Game.WriteCall
+                    IconView Icon.edit blocking Fab.Normal Strings.WriteCall Game.WriteCall

                Submit ->
-                    IconView Icon.check blocking Fab.Normal Strings.SubmitPlay Game.Submit
+                    IconView Icon.accept blocking Fab.Normal Strings.SubmitPlay Game.Submit

                TakeBack ->
                    IconView Icon.undo normal Fab.Normal Strings.TakeBackPlay Game.TakeBack

                Judge ->
-                    IconView Icon.trophy blocking Fab.Normal Strings.JudgePlay Game.Judge
+                    IconView Icon.win blocking Fab.Normal Strings.JudgePlay Game.Judge

                Like ->
-                    IconView Icon.thumbsUp normal Fab.Normal Strings.LikePlay Game.Like
+                    IconView Icon.like normal Fab.Normal Strings.LikePlay Game.Like

                Advance ->
-                    IconView Icon.forward blocking Fab.Normal Strings.AdvanceRound Game.AdvanceRound
+                    IconView Icon.skip blocking Fab.Normal Strings.AdvanceRound Game.AdvanceRound

                Discard ->
-                    IconView Icon.trash normal Fab.Mini Strings.HouseRuleNeverHaveIEver Game.Discard
+                    IconView Icon.discard normal Fab.Mini Strings.HouseRuleNeverHaveIEver Game.Discard
    in
    Fab.view shared
        type_
        title
-        (icon |> Icon.present)
+        icon
        (onClick |> wrap |> Just)
        (HtmlA.classList [ ( "action", True ), ( "exited", visible /= Just action ) ] :: attrs)


 type alias IconView msg =
-    { icon : Icon
+    { icon : Icon Icon.WithoutId
    , attrs : List (Html.Attribute msg)
    , type_ : Fab.Type
    , title : MdString
@@ -1,8 +1,7 @@
 module MassiveDecks.Game.History exposing (view)

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Keyed as HtmlK
@@ -13,6 +12,7 @@ import MassiveDecks.Card.Response as Response
 import MassiveDecks.Game.Messages exposing (Msg(..))
 import MassiveDecks.Game.Round as Round
 import MassiveDecks.Game.Round.Plays as Plays
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.Configure.Model exposing (Config)
 import MassiveDecks.Strings as Strings
@@ -28,7 +28,7 @@ view wrap shared config users name history =
        [ Html.div [ HtmlA.id "minor-actions" ]
            [ IconButton.view shared
                Strings.ViewGameHistoryAction
-                (Icon.arrowLeft |> Icon.present |> NeList.just)
+                (Icon.back |> NeList.just)
                (ToggleHistoryView |> wrap |> Just)
            ]
        ]
@@ -7,13 +7,13 @@ module MassiveDecks.Game.Round.Plays exposing
    )

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
 import Html.Keyed as HtmlK
 import MassiveDecks.Card.Play as Play
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Strings as Strings
 import MassiveDecks.Strings.Languages as Lang
@@ -67,12 +67,12 @@ viewByLine shared users { by, specialRole, likes } =
                ( cls, icon ) =
                    case role of
                        Winner ->
-                            ( "trophy", Icon.trophy )
+                            ( "trophy", Icon.win )

                        Czar ->
-                            ( "czar", Icon.gavel )
+                            ( "czar", Icon.czar )
            in
-            Html.span [ HtmlA.class cls ] [ Icon.viewIcon icon ]
+            Html.span [ HtmlA.class cls ] [ Icon.view icon ]

        name =
            users |> Dict.get by |> Maybe.map .name |> Maybe.withDefault (Strings.UnknownUser |> Lang.string shared)
@@ -1,43 +1,394 @@
-module MassiveDecks.Icon exposing
-    ( callCard
-    , massiveDecks
-    , minimalCardSize
-    , rereadGames
-    , responseCard
-    , squareCardSize
-    )
+module MassiveDecks.Icon exposing (..)

 {-| Icons that aren't in FontAwesome that we need.
 -}

-import FontAwesome.Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon, WithoutId)
+import FontAwesome.Attributes as Icon
+import FontAwesome.Solid as Icon
+import MassiveDecks.Icon.Definitions as Definitions


-rereadGames : Icon
+rereadGames : Icon WithoutId
 rereadGames =
-    Icon "fab" "reread-games" 512 512 [ "M258 16c-62 0-124 24-171 71-95 94-94 246 0 339 95 93 250 93 345 0l12-12-15-14-12 12-10-10c-82 80-213 80-295 0-82-81-82-210-1-291 81-80 212-81 294-3l-38 35 129 25-1-3-26-117-39 36c-48-46-110-68-172-68zm-79 159c-46 1-70 10-70 10v133s24-9 70-9c50 0 70 20 70 20V196s-20-21-70-21zm160 0c-50 0-70 21-70 21v133s20-20 70-20c46 0 70 9 70 9V185s-24-9-70-10zM179 323c-46 1-70 10-70 10v16s24-9 70-9c50 0 81 31 81 31s30-31 80-31c46 0 70 9 70 9v-16s-24-9-70-10c-50 0-80 32-80 32s-31-32-81-32z" ]
+    Definitions.rereadGames |> Icon.present


-massiveDecks : Icon
+massiveDecks : Icon WithoutId
 massiveDecks =
-    Icon "fab" "massive-decks" 512 512 [ "M273 20c-11 0-21 9-23 21l-9 88h-8L39 163c-12 2-21 15-19 27l50 283c2 12 15 21 27 19l194-34c12-3 21-15 18-27l-13-73 140 14c13 2 25-8 26-20l30-286c1-13-8-24-21-25L276 20h-3zm0 16h1l196 21c4 0 6 3 6 7l-30 286c0 4-4 7-8 6l-144-15-35-193-3-9 10-97c1-3 4-6 7-6zm47 106l-10 99 39 4c15 2 25 0 32-8 9-8 15-21 16-37 2-15-1-29-8-39-6-9-15-13-30-15zm19 20l18 1c16 2 22 14 20 35-3 22-11 32-27 31l-18-2zm-135 91l17 98-20 4-13-77-4 80-20 3-32-73 14 76-20 4-18-98 31-6 31 75 4-81z" ]
+    Definitions.massiveDecks |> Icon.present


-minimalCardSize : Icon
+minimalCardSize : Icon WithoutId
 minimalCardSize =
-    Icon "fas" "minimal-card-size" 384 512 [ "M45 395c-21 0-39 17-39 39v39c0 21 18 39 39 39h294c21 0 39-18 39-39v-39c0-22-18-39-39-39z" ]
+    Definitions.minimalCardSize |> Icon.present


-squareCardSize : Icon
+squareCardSize : Icon WithoutId
 squareCardSize =
-    Icon "fas" "square-card-size" 384 512 [ "M45 141c-21 0-39 17-39 39v293c0 21 18 39 39 39h294c21 0 39-18 39-39V180c0-22-18-39-39-39z" ]
+    Definitions.squareCardSize |> Icon.present


-callCard : Icon
+callCard : Icon WithoutId
 callCard =
-    Icon "fas" "call-card" 384 512 [ "M45 10h294c16 0 29 13 29 29v434c0 16-13 29-29 29H45c-16 0-29-13-29-29V39c0-16 13-29 29-29z" ]
+    Definitions.callCard |> Icon.present


-responseCard : Icon
+responseCard : Icon WithoutId
 responseCard =
-    Icon "fas" "response-card" 384 512 [ "M45 0C24 0 6 18 6 39v434c0 21 18 39 39 39h294c21 0 39-18 39-39V39c0-21-18-39-39-39zm0 20h294c11 0 19 8 19 19v434c0 11-8 19-19 19H45c-11 0-19-8-19-19V39c0-11 8-19 19-19z" ]
+    Definitions.responseCard |> Icon.present
+
+
+loading : Icon WithoutId
+loading =
+    Icon.circleNotch |> Icon.styled [ Icon.spin ]
+
+
+manyDecks : Icon WithoutId
+manyDecks =
+    Definitions.manyDecks |> Icon.present
+
+
+jsonAgainstHumanity : Icon WithoutId
+jsonAgainstHumanity =
+    Icon.code
+
+
+add : Icon WithoutId
+add =
+    Icon.plus
+
+
+remove : Icon WithoutId
+remove =
+    Icon.minus
+
+
+new : Icon WithoutId
+new =
+    Icon.plus
+
+
+join : Icon WithoutId
+join =
+    Icon.arrowRightToBracket
+
+
+leave : Icon WithoutId
+leave =
+    Icon.arrowRightFromBracket
+
+
+find : Icon WithoutId
+find =
+    Icon.magnifyingGlass
+
+
+about : Icon WithoutId
+about =
+    Icon.circleQuestion
+
+
+close : Icon WithoutId
+close =
+    Icon.xmark
+
+
+start : Icon WithoutId
+start =
+    Icon.rocket
+
+
+end : Icon WithoutId
+end =
+    Icon.circleStop
+
+
+back : Icon WithoutId
+back =
+    Icon.arrowLeft
+
+
+skip : Icon WithoutId
+skip =
+    Icon.forwardFast
+
+
+configure : Icon WithoutId
+configure =
+    Icon.cog
+
+
+show : Icon WithoutId
+show =
+    Icon.eye
+
+
+hide : Icon WithoutId
+hide =
+    Icon.eyeSlash
+
+
+users : Icon WithoutId
+users =
+    Icon.users
+
+
+invite : Icon WithoutId
+invite =
+    Icon.bullhorn
+
+
+spectator : Icon WithoutId
+spectator =
+    Icon.tv
+
+
+player : Icon WithoutId
+player =
+    Icon.chessPawn
+
+
+info : Icon WithoutId
+info =
+    Icon.info
+
+
+bug : Icon WithoutId
+bug =
+    Icon.bug
+
+
+menu : Icon WithoutId
+menu =
+    Icon.bars
+
+
+connected : Icon WithoutId
+connected =
+    Icon.plugCircleCheck
+
+
+disconnected : Icon WithoutId
+disconnected =
+    Icon.plugCircleXmark
+
+
+userPromote : Icon WithoutId
+userPromote =
+    Icon.userPlus
+
+
+userDemote : Icon WithoutId
+userDemote =
+    Icon.userMinus
+
+
+userKick : Icon WithoutId
+userKick =
+    Icon.userXmark
+
+
+userAway : Icon WithoutId
+userAway =
+    Icon.userClock
+
+
+userBack : Icon WithoutId
+userBack =
+    Icon.userCheck
+
+
+win : Icon WithoutId
+win =
+    Icon.trophy
+
+
+toTop : Icon WithoutId
+toTop =
+    Icon.arrowsUpToLine
+
+
+toBottom : Icon WithoutId
+toBottom =
+    Icon.arrowsDownToLine
+
+
+help : Icon WithoutId
+help =
+    Icon.question
+
+
+slash : Icon WithoutId
+slash =
+    Icon.slash
+
+
+accept : Icon WithoutId
+accept =
+    Icon.check
+
+
+discard : Icon WithoutId
+discard =
+    Icon.trash
+
+
+history : Icon WithoutId
+history =
+    Icon.clockRotateLeft
+
+
+random : Icon WithoutId
+random =
+    Icon.shuffle
+
+
+czar : Icon WithoutId
+czar =
+    Icon.gavel
+
+
+edit : Icon WithoutId
+edit =
+    Icon.penToSquare
+
+
+undo : Icon WithoutId
+undo =
+    Icon.arrowRotateLeft
+
+
+redo : Icon WithoutId
+redo =
+    Icon.arrowRotateRight
+
+
+like : Icon WithoutId
+like =
+    Icon.thumbsUp
+
+
+warning : Icon WithoutId
+warning =
+    Icon.triangleExclamation
+
+
+left : Icon WithoutId
+left =
+    Icon.arrowLeft
+
+
+right : Icon WithoutId
+right =
+    Icon.arrowRight
+
+
+normalText : Icon WithoutId
+normalText =
+    Icon.a
+
+
+italicText : Icon WithoutId
+italicText =
+    Icon.italic
+
+
+empty : Icon WithoutId
+empty =
+    Icon.ghost
+
+
+save : Icon WithoutId
+save =
+    Icon.floppyDisk
+
+
+human : Icon WithoutId
+human =
+    Icon.user
+
+
+computer : Icon WithoutId
+computer =
+    Icon.robot
+
+
+disableAi : Icon WithoutId
+disableAi =
+    Icon.powerOff
+
+
+disableEdit : Icon WithoutId
+disableEdit =
+    Icon.eraser
+
+
+copy : Icon WithoutId
+copy =
+    Icon.copy
+
+
+lock : Icon WithoutId
+lock =
+    Icon.lock
+
+
+refresh : Icon WithoutId
+refresh =
+    Icon.sync
+
+
+autoAdvance : Icon WithoutId
+autoAdvance =
+    Icon.forward
+
+
+tts : Icon WithoutId
+tts =
+    Icon.commentDots
+
+
+notification : Icon WithoutId
+notification =
+    Icon.bell
+
+
+language : Icon WithoutId
+language =
+    Icon.language
+
+
+point : Icon WithoutId
+point =
+    Icon.star
+
+
+gameCode : Icon WithoutId
+gameCode =
+    Icon.qrcode
+
+
+packingHeat : Icon WithoutId
+packingHeat =
+    Icon.parachuteBox
+
+
+happyEnding : Icon WithoutId
+happyEnding =
+    Icon.smile
+
+
+czarChoices : Icon WithoutId
+czarChoices =
+    Icon.clipboardList
+
+
+waiting : Icon WithoutId
+waiting =
+    Icon.clock
+
+
+played : Icon WithoutId
+played =
+    Icon.check
@@ -0,0 +1,49 @@
+module MassiveDecks.Icon.Definitions exposing
+    ( callCard
+    , manyDecks
+    , massiveDecks
+    , minimalCardSize
+    , rereadGames
+    , responseCard
+    , squareCardSize
+    )
+
+{-| Icons that aren't in FontAwesome that we need.
+-}
+
+import FontAwesome exposing (IconDef)
+
+
+rereadGames : IconDef
+rereadGames =
+    IconDef "fab" "reread-games" ( 512, 512 ) ( "M258 16c-62 0-124 24-171 71-95 94-94 246 0 339 95 93 250 93 345 0l12-12-15-14-12 12-10-10c-82 80-213 80-295 0-82-81-82-210-1-291 81-80 212-81 294-3l-38 35 129 25-1-3-26-117-39 36c-48-46-110-68-172-68zm-79 159c-46 1-70 10-70 10v133s24-9 70-9c50 0 70 20 70 20V196s-20-21-70-21zm160 0c-50 0-70 21-70 21v133s20-20 70-20c46 0 70 9 70 9V185s-24-9-70-10zM179 323c-46 1-70 10-70 10v16s24-9 70-9c50 0 81 31 81 31s30-31 80-31c46 0 70 9 70 9v-16s-24-9-70-10c-50 0-80 32-80 32s-31-32-81-32z", Nothing )
+
+
+massiveDecks : IconDef
+massiveDecks =
+    IconDef "fab" "massive-decks" ( 512, 512 ) ( "M273 20c-11 0-21 9-23 21l-9 88h-8L39 163c-12 2-21 15-19 27l50 283c2 12 15 21 27 19l194-34c12-3 21-15 18-27l-13-73 140 14c13 2 25-8 26-20l30-286c1-13-8-24-21-25L276 20h-3zm0 16h1l196 21c4 0 6 3 6 7l-30 286c0 4-4 7-8 6l-144-15-35-193-3-9 10-97c1-3 4-6 7-6zm47 106l-10 99 39 4c15 2 25 0 32-8 9-8 15-21 16-37 2-15-1-29-8-39-6-9-15-13-30-15zm19 20l18 1c16 2 22 14 20 35-3 22-11 32-27 31l-18-2zm-135 91l17 98-20 4-13-77-4 80-20 3-32-73 14 76-20 4-18-98 31-6 31 75 4-81z", Nothing )
+
+
+minimalCardSize : IconDef
+minimalCardSize =
+    IconDef "fas" "minimal-card-size" ( 384, 512 ) ( "M45 395c-21 0-39 17-39 39v39c0 21 18 39 39 39h294c21 0 39-18 39-39v-39c0-22-18-39-39-39z", Nothing )
+
+
+squareCardSize : IconDef
+squareCardSize =
+    IconDef "fas" "square-card-size" ( 384, 512 ) ( "M45 141c-21 0-39 17-39 39v293c0 21 18 39 39 39h294c21 0 39-18 39-39V180c0-22-18-39-39-39z", Nothing )
+
+
+callCard : IconDef
+callCard =
+    IconDef "fas" "call-card" ( 384, 512 ) ( "M45 10h294c16 0 29 13 29 29v434c0 16-13 29-29 29H45c-16 0-29-13-29-29V39c0-16 13-29 29-29z", Nothing )
+
+
+responseCard : IconDef
+responseCard =
+    IconDef "fas" "response-card" ( 384, 512 ) ( "M45 0C24 0 6 18 6 39v434c0 21 18 39 39 39h294c21 0 39-18 39-39V39c0-21-18-39-39-39zm0 20h294c11 0 19 8 19 19v434c0 11-8 19-19 19H45c-11 0-19-8-19-19V39c0-11 8-19 19-19z", Nothing )
+
+
+manyDecks : IconDef
+manyDecks =
+    IconDef "fab" "massive-decks" ( 512, 512 ) ( "M248 0c-4 0-8 4-9 9l-4 37h-3l-82 15c-5 1-8 6-8 11l21 121c1 5 7 9 12 8l81-14c5-2 9-7 7-12l-5-31 59 6c5 1 10-3 11-9l12-121c1-6-3-11-9-11l-81-9zm0 7h1l82 9c2 0 2 1 2 3l-12 122c0 1-2 3-3 2l-61-6-14-82-2-4 4-42 3-2zm20 45-4 42 16 2c7 1 11 0 14-4 3-3 6-8 6-15 1-7 0-13-3-17s-6-5-13-6zm8 9h8c6 1 9 6 8 15s-5 13-11 13l-8-1zm-57 38 8 42-9 2-5-33-2 34-8 1-14-31 6 33-8 1-8-41 13-3 13 32 2-35zm120 238c-13 0-26-7-33-18l-50-84-50 84a38 38 0 0 1-43 17L56 305v139c0 12 8 22 19 24l169 43c8 2 16 2 24 0l169-43c12-2 19-12 19-24V305l-107 30c-3 2-7 2-10 2zm166-88-40-80c-2-5-8-8-13-7l-196 25 72 119c3 5 9 7 14 6l155-45c8-2 12-10 8-18zM47 169 7 249c-4 7 0 16 8 18l155 45c5 1 11-1 14-6l72-119-196-25c-5-1-10 2-13 7z", Nothing )
@@ -1,15 +1,12 @@
 module MassiveDecks.Pages.Loading exposing (view)

+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
+import MassiveDecks.Icon as Icon


 view : List (Html msg)
 view =
-    [ Html.div [ HtmlA.id "loading" ]
-        [ Icon.viewStyled [ Icon.spin ] Icon.sync
-        ]
-    ]
+    [ Html.div [ HtmlA.id "loading" ] [ Icon.loading |> Icon.view ] ]
@@ -10,11 +10,10 @@ module MassiveDecks.Pages.Lobby exposing

 import Browser.Navigation as Navigation
 import Dict exposing (Dict)
+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
 import FontAwesome.Brands as Icon
-import FontAwesome.Icon as Icon
 import FontAwesome.Layering as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -35,6 +34,7 @@ import MassiveDecks.Game.Model as Game exposing (Game)
 import MassiveDecks.Game.Player as Player exposing (Player)
 import MassiveDecks.Game.Round as Round exposing (Round)
 import MassiveDecks.Game.Time as Time
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Models.MdError as MdError
 import MassiveDecks.Pages.Lobby.Actions as Actions
@@ -542,7 +542,7 @@ viewWithUsers wrap wrapSettings shared s viewContent model =

        usersIcon =
            if usersShown then
-                Icon.eyeSlash
+                Icon.hide

            else
                Icon.users
@@ -575,7 +575,7 @@ viewWithUsers wrap wrapSettings shared s viewContent model =
                (List.concat
                    [ [ IconButton.view shared
                            Strings.ToggleUserList
-                            (usersIcon |> Icon.present |> Icon.styled [ Icon.lg ] |> NeList.just)
+                            (usersIcon |> Icon.styled [ Icon.lg ] |> NeList.just)
                            (usersShown |> not |> Settings.ChangeOpenUserList |> wrapSettings |> Just)
                      , lobbyMenu wrap shared model.gameMenu model.route s audienceMode localUser localPlayer (maybeGame |> Maybe.map .game)
                      ]
@@ -589,7 +589,7 @@ viewWithUsers wrap wrapSettings shared s viewContent model =
                    |> Maybe.map2 (viewLobby wrap shared model.auth model.userMenu viewContent) model.timeAnchor
                    |> Maybe.withDefault
                        [ Html.div [ HtmlA.class "loading" ]
-                            [ Icon.viewStyled [ Icon.spin, Icon.fa3x ] Icon.circleNotch ]
+                            [ Icon.loading |> Icon.styled [ Icon.fa3x ] |> Icon.view ]
                        ]
               )
        )
@@ -621,7 +621,7 @@ viewLobby wrap shared auth openUserMenu viewContent timeAnchor lobbyAndConfigure
            else if game |> Maybe.map (.winner >> Maybe.isNothing) |> Maybe.withDefault False then
                Message.infoWithFix Strings.ConfigurationDisabledWhileInGame
                    [ { description = Strings.EndGame
-                      , icon = Icon.stopCircle
+                      , icon = Icon.end
                      , action = wrap EndGame
                      }
                    ]
@@ -654,7 +654,7 @@ lobbyMenu : (Msg -> msg) -> Shared -> Menu.State -> Route -> Section -> Bool ->
 lobbyMenu wrap shared menuState r s audienceMode user player game =
    let
        lobbyMenuItems =
-            [ Menu.button Icon.bullhorn Strings.InvitePlayers Strings.InvitePlayersDescription (ToggleInviteDialog |> wrap |> Just) ]
+            [ Menu.button Icon.invite Strings.InvitePlayers Strings.InvitePlayersDescription (ToggleInviteDialog |> wrap |> Just) ]

        setPresence =
            setPresenceMenuItem wrap player
@@ -662,10 +662,10 @@ lobbyMenu wrap shared menuState r s audienceMode user player game =
        playerState role =
            case role of
                User.Player ->
-                    Menu.button Icon.eye Strings.BecomeSpectator Strings.BecomeSpectatorDescription (SetUserRole Nothing User.Spectator |> wrap |> Just)
+                    Menu.button Icon.spectator Strings.BecomeSpectator Strings.BecomeSpectatorDescription (SetUserRole Nothing User.Spectator |> wrap |> Just)

                User.Spectator ->
-                    Menu.button Icon.chessPawn Strings.BecomePlayer Strings.BecomePlayerDescription (SetUserRole Nothing User.Player |> wrap |> Just)
+                    Menu.button Icon.player Strings.BecomePlayer Strings.BecomePlayerDescription (SetUserRole Nothing User.Player |> wrap |> Just)

        userLobbyMenuItems =
            [ setPresence |> Just
@@ -673,7 +673,7 @@ lobbyMenu wrap shared menuState r s audienceMode user player game =
                |> Maybe.andThen (\u -> u |> Maybe.justIf (u.privilege == User.Privileged || not audienceMode))
                |> Maybe.map (.role >> playerState)
            , Menu.button
-                Icon.signOutAlt
+                Icon.leave
                Strings.LeaveGame
                Strings.LeaveGameDescription
                (Leave |> wrap |> Just)
@@ -682,17 +682,17 @@ lobbyMenu wrap shared menuState r s audienceMode user player game =
                |> List.filterMap identity

        viewMenuItems =
-            [ Menu.link Icon.tv Strings.Spectate Strings.SpectateDescription ({ r | section = Just Spectate } |> Route.Lobby |> Route.url |> Just)
+            [ Menu.link Icon.spectator Strings.Spectate Strings.SpectateDescription ({ r | section = Just Spectate } |> Route.Lobby |> Route.url |> Just)
            , case s of
                Configure ->
-                    Menu.button Icon.play Strings.ReturnViewToGame Strings.ReturnViewToGameDescription (Nothing |> ChangeSection |> wrap |> Maybe.justIf (game /= Nothing))
+                    Menu.button Icon.start Strings.ReturnViewToGame Strings.ReturnViewToGameDescription (Nothing |> ChangeSection |> wrap |> Maybe.justIf (game /= Nothing))

                _ ->
-                    Menu.button Icon.cog Strings.ViewConfiguration Strings.ViewConfigurationDescription (Configure |> Just |> ChangeSection |> wrap |> Just)
+                    Menu.button Icon.configure Strings.ViewConfiguration Strings.ViewConfigurationDescription (Configure |> Just |> ChangeSection |> wrap |> Just)
            ]

        privilegedLobbyMenuItems =
-            [ Menu.button Icon.stopCircle Strings.EndGame Strings.EndGameDescription (game |> Maybe.andThen (\g -> EndGame |> wrap |> Maybe.justIf (g.winner == Nothing)))
+            [ Menu.button Icon.end Strings.EndGame Strings.EndGameDescription (game |> Maybe.andThen (\g -> EndGame |> wrap |> Maybe.justIf (g.winner == Nothing)))
            ]

        mdMenuItems =
@@ -717,7 +717,7 @@ lobbyMenu wrap shared menuState r s audienceMode user player game =
        Menu.BottomEnd
        (IconButton.view shared
            Strings.GameMenu
-            (Icon.bars |> Icon.present |> Icon.styled [ Icon.lg ] |> NeList.just)
+            (Icon.menu |> Icon.styled [ Icon.lg ] |> NeList.just)
            (menuState |> Menu.toggle |> SetGameMenuState |> wrap |> Just)
        )
        separatedMenuItems
@@ -832,25 +832,25 @@ viewNotification wrap shared users animationState notification =
        ( icon, message, class ) =
            case notification.message of
                UserConnected id ->
-                    ( Icon.viewIcon Icon.plug
+                    ( Icon.view Icon.connected
                    , Strings.UserConnected { username = username shared users id } |> Lang.html shared
                    , Nothing
                    )

                UserDisconnected id ->
-                    ( Icon.layers [] [ Icon.viewIcon Icon.plug, Icon.viewIcon Icon.slash ]
+                    ( Icon.view Icon.disconnected
                    , Strings.UserDisconnected { username = username shared users id } |> Lang.html shared
                    , Nothing
                    )

                UserJoined id ->
-                    ( Icon.viewIcon Icon.signInAlt
+                    ( Icon.view Icon.join
                    , Strings.UserJoined { username = username shared users id } |> Lang.html shared
                    , Nothing
                    )

                UserLeft id leaveReason ->
-                    ( Icon.viewIcon Icon.signOutAlt
+                    ( Icon.view Icon.leave
                    , case leaveReason of
                        User.LeftNormally ->
                            Strings.UserLeft { username = username shared users id } |> Lang.html shared
@@ -861,7 +861,7 @@ viewNotification wrap shared users animationState notification =
                    )

                Error mdError ->
-                    ( Icon.viewIcon Icon.exclamationTriangle
+                    ( Icon.view Icon.bug
                    , MdError.describe mdError |> Lang.html shared
                    , Just "error"
                    )
@@ -990,7 +990,7 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga
                                if localUserId /= userId then
                                    case user.privilege of
                                        User.Unprivileged ->
-                                            [ Menu.button Icon.userPlus
+                                            [ Menu.button Icon.userPromote
                                                Strings.Promote
                                                Strings.Promote
                                                (SetPrivilege userId User.Privileged |> wrap |> Just)
@@ -999,7 +999,7 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga

                                        User.Privileged ->
                                            [ Menu.button
-                                                Icon.userMinus
+                                                Icon.userDemote
                                                Strings.Demote
                                                Strings.Demote
                                                (SetPrivilege userId User.Unprivileged |> wrap |> Just)
@@ -1016,7 +1016,7 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga
                        if (localUserId == userId && not audienceMode) || localUserPrivilege == User.Privileged then
                            case user.role of
                                User.Player ->
-                                    [ Menu.button Icon.eye
+                                    [ Menu.button Icon.spectator
                                        Strings.BecomeSpectator
                                        Strings.BecomeSpectatorDescription
                                        (SetUserRole (Just userId) User.Spectator |> wrap |> Just)
@@ -1024,7 +1024,7 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga
                                    ]

                                User.Spectator ->
-                                    [ Menu.button Icon.chessPawn
+                                    [ Menu.button Icon.player
                                        Strings.BecomePlayer
                                        Strings.BecomePlayerDescription
                                        (SetUserRole (Just userId) User.Player |> wrap |> Just)
@@ -1040,12 +1040,12 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga
                                let
                                    kickOrLeave =
                                        if userId == localUserId then
-                                            Menu.button Icon.signOutAlt Strings.LeaveGame Strings.LeaveGame (Leave |> wrap |> Just) |> Just
+                                            Menu.button Icon.leave Strings.LeaveGame Strings.LeaveGame (Leave |> wrap |> Just) |> Just

                                        else
                                            case localUserPrivilege of
                                                User.Privileged ->
-                                                    Menu.button Icon.ban Strings.KickUser Strings.KickUser (userId |> Kick |> wrap |> Just) |> Just
+                                                    Menu.button Icon.userKick Strings.KickUser Strings.KickUser (userId |> Kick |> wrap |> Just) |> Just

                                                User.Unprivileged ->
                                                    Nothing
@@ -1058,7 +1058,7 @@ viewUser wrap shared localUserId localUserPrivilege audienceMode openUserMenu ga
                                        else if not isAway && game /= Nothing then
                                            case localUserPrivilege of
                                                User.Privileged ->
-                                                    Menu.button Icon.userClock Strings.SetAway Strings.SetAway (userId |> SetAway |> wrap |> Just) |> Just
+                                                    Menu.button Icon.userAway Strings.SetAway Strings.SetAway (userId |> SetAway |> wrap |> Just) |> Just

                                                User.Unprivileged ->
                                                    Nothing
@@ -1124,13 +1124,13 @@ setPresenceMenuItem : (Msg -> msg) -> Maybe Player -> Menu.Part msg
 setPresenceMenuItem wrap player =
    case player |> Maybe.map .presence of
        Just Player.Active ->
-            Menu.button Icon.userClock Strings.SetAway Strings.SetAway (Player.Away |> Game.SetPresence |> GameMsg |> wrap |> Just)
+            Menu.button Icon.userAway Strings.SetAway Strings.SetAway (Player.Away |> Game.SetPresence |> GameMsg |> wrap |> Just)

        Just Player.Away ->
-            Menu.button Icon.userCheck Strings.SetBack Strings.SetBack (Player.Active |> Game.SetPresence |> GameMsg |> wrap |> Just)
+            Menu.button Icon.userBack Strings.SetBack Strings.SetBack (Player.Active |> Game.SetPresence |> GameMsg |> wrap |> Just)

        Nothing ->
-            Menu.button Icon.userClock Strings.SetAway Strings.SetAway Nothing
+            Menu.button Icon.userAway Strings.SetAway Strings.SetAway Nothing


 userDetails : Shared -> Maybe Game -> User.Id -> User -> ( List (Html msg), List (Html msg) )
@@ -1193,7 +1193,7 @@ viewCastButton wrap shared auth attrs =
    [ Html.div (HtmlA.class "cast-button" :: attrs)
        [ IconButton.view shared
            Strings.Cast
-            (Icon.chromecast |> Icon.present |> Icon.styled [ Icon.lg ] |> NeList.just)
+            (Icon.chromecast |> Icon.styled [ Icon.lg ] |> NeList.just)
            (auth |> TryCast |> wrap |> Just)
        ]
    ]
@@ -6,8 +6,7 @@ module MassiveDecks.Pages.Lobby.Configure exposing
    )

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -19,6 +18,7 @@ import MassiveDecks.Components.Form as Form
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
 import MassiveDecks.Error.Model as Error exposing (Error)
 import MassiveDecks.Game.Rules as Rules
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Models.Decoders as Decoders
 import MassiveDecks.Models.Encoders as Encoders
@@ -195,7 +195,7 @@ view wrap wrapLobby shared return disabledReason gameCode { lobby, configure } =
                Button.Raised
                Strings.ReturnViewToGame
                Strings.ReturnViewToGameDescription
-                (Icon.arrowLeft |> Icon.viewIcon)
+                (Icon.back |> Icon.view)
                [ HtmlA.class "game-in-progress", HtmlE.onClick msg ]

        returnButton =
@@ -262,13 +262,13 @@ actions wrap shared hasChanges config =
        [ Fab.view shared
            Fab.Normal
            Strings.SaveChanges
-            (Icon.save |> Icon.present)
+            Icon.save
            (SaveChanges |> wrap |> Maybe.justIf (Configurable.isValid (all wrap config) config))
            [ HtmlA.classList [ ( "action", True ), ( "important", True ), ( "exited", not hasChanges ) ] ]
        , Fab.view shared
            Fab.Mini
            Strings.RevertChanges
-            (Icon.undo |> Icon.present)
+            Icon.undo
            (RevertChanges |> wrap |> Just)
            [ HtmlA.classList [ ( "action", True ), ( "exited", not hasChanges ), ( "normal", True ) ] ]
        ]
@@ -410,7 +410,7 @@ startGameSegment wrap wrapLobby shared canEdit model lobby returnButton =
                Button.Raised
                Strings.StartGame
                Strings.StartGame
-                (Icon.rocket |> Icon.viewIcon)
+                (Icon.start |> Icon.view)
                [ startGameAttrs ]
            ]
        ]
@@ -480,7 +480,7 @@ startGameProblems shared wrap wrapLobby users model remote =
                [ Message.errorWithFix
                    Strings.NeedAtLeastOneDeck
                    [ { description = Strings.NoDecksHint
-                      , icon = Icon.plus
+                      , icon = Icon.add
                      , action = shared |> Lang.recommended |> Decks.Add |> DecksMsg |> wrap
                      }
                    ]
@@ -520,7 +520,7 @@ startGameProblems shared wrap wrapLobby users model remote =
                    |> Maybe.justIf (summaries .calls < 1)
                , Message.errorWithFix
                    (Strings.NotEnoughCardsOfType { cardType = Strings.Response, needed = requiredResponses, have = numberOfResponses })
-                    [ Message.Fix (Strings.AddBlankCards { amount = diff }) Icon.plus fixMsg ]
+                    [ Message.Fix (Strings.AddBlankCards { amount = diff }) Icon.add fixMsg ]
                    |> Maybe.justIf (numberOfResponses < requiredResponses)
                ]

@@ -545,11 +545,11 @@ startGameProblems shared wrap wrapLobby users model remote =
            [ Message.errorWithFix
                Strings.NeedAtLeastThreePlayers
                [ { description = Strings.Invite
-                  , icon = Icon.bullhorn
+                  , icon = Icon.invite
                  , action = wrapLobby Lobby.ToggleInviteDialog
                  }
                , { description = Strings.AddAnAiPlayer
-                  , icon = Icon.robot
+                  , icon = Icon.computer
                  , action = addAisFixMsg
                  }
                ]
@@ -557,7 +557,7 @@ startGameProblems shared wrap wrapLobby users model remote =
            , Message.errorWithFix
                Strings.NeedAtLeastOneHuman
                [ { description = Strings.Invite
-                  , icon = Icon.bullhorn
+                  , icon = Icon.invite
                  , action = wrapLobby Lobby.ToggleInviteDialog
                  }
                ]
@@ -594,11 +594,11 @@ startGameProblems shared wrap wrapLobby users model remote =
            [ Message.errorWithFix
                Strings.RandoCantWrite
                [ { description = Strings.DisableRando
-                  , icon = Icon.powerOff
+                  , icon = Icon.disableAi
                  , action = disableRandoFixMsg
                  }
                , { description = Strings.DisableComedyWriter
-                  , icon = Icon.eraser
+                  , icon = Icon.disableEdit
                  , action = disableComedyWriterFixMsg
                  }
                ]
@@ -12,11 +12,11 @@ module MassiveDecks.Pages.Lobby.Configure.Configurable.Editor exposing
    , toggle
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Strings as Strings exposing (MdString)
 import MassiveDecks.Strings.Languages as Lang
@@ -184,15 +184,15 @@ password setPasswordVisibility label _ update model value { shared, readOnly } =
    let
        ( icon, type_ ) =
            if model.passwordVisible then
-                ( Icon.eyeSlash, TextField.Text )
+                ( Icon.hide, TextField.Text )

            else
-                ( Icon.eye, TextField.Password )
+                ( Icon.show, TextField.Password )

        toggleVisibility =
            IconButton.view shared
                Strings.LobbyPassword
-                (icon |> Icon.present |> NeList.just)
+                (icon |> NeList.just)
                (model.passwordVisible |> not |> setPasswordVisibility |> Just)
    in
    [ TextField.view shared
@@ -7,8 +7,8 @@ module MassiveDecks.Pages.Lobby.Configure.Configurable.Validator exposing
    , whenJust
    )

-import FontAwesome.Solid as Icon
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Strings as Strings
 import MassiveDecks.Util.Maybe as Maybe

@@ -32,14 +32,14 @@ between min max set value =
        [ Message.errorWithFix (Strings.MustBeMoreThanOrEqualValidationError { min = min })
            [ { description = Strings.SetValue { value = min }
              , action = set min
-              , icon = Icon.arrowUp
+              , icon = Icon.toTop
              }
            ]
            |> Maybe.justIf (value < min)
        , Message.errorWithFix (Strings.MustBeLessThanOrEqualValidationError { max = max })
            [ { description = Strings.SetValue { value = max }
              , action = set max
-              , icon = Icon.arrowDown
+              , icon = Icon.toBottom
              }
            ]
            |> Maybe.justIf (value > max)
@@ -7,9 +7,8 @@ module MassiveDecks.Pages.Lobby.Configure.Decks exposing
    , view
    )

+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -19,6 +18,7 @@ import MassiveDecks.Card.Source.Model as Source
 import MassiveDecks.Components as Components
 import MassiveDecks.Components.Form as Form
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Models.Encoders as Encoders
 import MassiveDecks.Pages.Lobby.Actions as Actions
@@ -98,7 +98,7 @@ view wrap shared model remote canEdit =
                [ Html.tr [ HtmlA.class "empty-info" ]
                    [ Html.td [ HtmlA.colspan 3 ]
                        [ Html.p []
-                            [ Icon.viewIcon Icon.ghost
+                            [ Icon.view Icon.empty
                            , Html.text " "
                            , Strings.NoDecks |> Lang.html shared
                            ]
@@ -204,7 +204,7 @@ addDeckWidget wrap shared existing deckToAdd =
                [ deckPicker
                , IconButton.view shared
                    Strings.AddDeck
-                    (NeList (Icon.plus |> Icon.present) [])
+                    (NeList Icon.add [])
                    (submit |> Result.toMaybe)
                ]
            ]
@@ -286,7 +286,7 @@ name wrap shared canEdit index source loading maybeError details =
            IconButton.view
                shared
                Strings.RemoveDeck
-                (NeList (Icon.trash |> Icon.present) [])
+                (NeList Icon.remove [])
                (index |> Remove |> wrap |> Just)
                |> Maybe.justIf canEdit

@@ -303,7 +303,7 @@ name wrap shared canEdit index source loading maybeError details =
            Html.span attrs [ Maybe.transformWith nameText makeLink details.url ] |> Just

        spinner =
-            Icon.viewStyled [ Icon.spin, SvgA.class "loading-deck-info" ] Icon.circleNotch |> Maybe.justIf loading
+            Icon.loading |> Icon.styled [ SvgA.class "loading-deck-info" ] |> Icon.view |> Maybe.justIf loading

        content =
            List.filterMap identity [ linkOrText, removeButton, spinner, tooltip ]
@@ -1,8 +1,8 @@
 module MassiveDecks.Pages.Lobby.Configure.Rules.HouseRules.CzarChoices exposing (all)

-import FontAwesome.Solid as Icon
 import MassiveDecks.Components.Form.Message as Message
 import MassiveDecks.Game.Rules as Rules
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Pages.Lobby.Configure.Configurable as Configurable
 import MassiveDecks.Pages.Lobby.Configure.Configurable.Editor as Editor
 import MassiveDecks.Pages.Lobby.Configure.Configurable.Model exposing (Configurable)
@@ -42,7 +42,7 @@ enabled wrap =
            always
                [ Message.info Strings.HouseRuleCzarChoicesDescription
                , Message.infoWithFix (Strings.SeeAlso { rule = Strings.DuringTitle })
-                    [ { description = Strings.ConfigureTimeLimits, icon = Icon.eye, action = ChangeTab Stages |> wrap } ]
+                    [ { description = Strings.ConfigureTimeLimits, icon = Icon.show, action = ChangeTab Stages |> wrap } ]
                ]
        }

@@ -1,8 +1,8 @@
 module MassiveDecks.Pages.Lobby.Configure.Stages exposing (all)

-import FontAwesome.Solid as Icon
 import MassiveDecks.Components.Form.Message as Message
 import MassiveDecks.Game.Rules as Rules
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Pages.Lobby.Configure.Configurable as Configurable
 import MassiveDecks.Pages.Lobby.Configure.Configurable.Editor as Editor
 import MassiveDecks.Pages.Lobby.Configure.Configurable.Model exposing (Configurable)
@@ -85,7 +85,7 @@ starting wrap =
                    always
                        [ Message.info Strings.StartingTimeLimitDescription
                        , Message.infoWithFix (Strings.SeeAlso { rule = Strings.HouseRuleCzarChoices })
-                            [ { description = Strings.ConfigureRules, icon = Icon.eye, action = Rules |> ChangeTab |> wrap } ]
+                            [ { description = Strings.ConfigureRules, icon = Icon.show, action = Rules |> ChangeTab |> wrap } ]
                        ]
                }
            ]
@@ -1,12 +1,12 @@
 module MassiveDecks.Pages.Lobby.Invite exposing (button, dialog, overlay)

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
 import MassiveDecks.Components.Form as Form
 import MassiveDecks.Components.Form.Message as Message
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Lobby.GameCode as GameCode exposing (GameCode)
 import MassiveDecks.Pages.Lobby.Messages as Lobby exposing (Msg(..))
@@ -27,7 +27,7 @@ import Url exposing (Url)
 -}
 button : (Msg -> msg) -> Shared -> Html msg
 button wrap shared =
-    IconButton.view shared Strings.Invite (Icon.bullhorn |> Icon.present |> NeList.just) (ToggleInviteDialog |> wrap |> Just)
+    IconButton.view shared Strings.Invite (Icon.invite |> NeList.just) (ToggleInviteDialog |> wrap |> Just)


 {-| A dialog overlay that displays information on how to invite people to the game.
@@ -45,7 +45,7 @@ dialog wrap shared gameCode password open =
        ]
        [ IconButton.viewNoPropagation shared
            Strings.Close
-            (Icon.times |> Icon.present |> NeList.just)
+            (Icon.close |> NeList.just)
            (Lobby.ToggleInviteDialog |> wrap |> Just)
        , Card.view [ HtmlE.onClickNoPropagation (wrap NoOp) ]
            [ Strings.InviteExplanation { gameCode = GameCode.toString gameCode, password = password } |> Lang.html shared
@@ -61,7 +61,7 @@ dialog wrap shared gameCode password open =
                        []
                    , IconButton.view shared
                        Strings.Copy
-                        (Icon.copy |> Icon.present |> NeList.just)
+                        (Icon.copy |> NeList.just)
                        ("invite-link-field" |> Copy |> wrap |> Just)
                    ]
                )
@@ -5,12 +5,12 @@ module MassiveDecks.Pages.Lobby.Spectate exposing
    )

 import Dict
+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Game.Messages as Game
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.Actions as Actions
 import MassiveDecks.Pages.Lobby.GameCode as GameCode exposing (GameCode)
@@ -77,10 +77,10 @@ viewSettings wrap changePage shared lobby =
        let
            advertiseIcon =
                if lobby.spectate.advertise then
-                    Icon.eyeSlash
+                    Icon.show

                else
-                    Icon.eye
+                    Icon.hide

            route =
                lobby.route
@@ -99,15 +99,15 @@ viewSettings wrap changePage shared lobby =
        [ Html.div [ HtmlA.id "spectate-actions" ]
            [ IconButton.view shared
                backDescription
-                (Icon.arrowLeft |> Icon.present |> NeList.just)
+                (Icon.back |> NeList.just)
                (Just backAction)
            , IconButton.view shared
                Strings.ViewConfigurationDescription
-                (Icon.cog |> Icon.present |> NeList.just)
+                (Icon.configure |> NeList.just)
                ({ route | section = Just Lobby.Configure } |> Route.Lobby |> changePage |> Just)
            , IconButton.view shared
                Strings.ToggleAdvertDescription
-                (advertiseIcon |> Icon.present |> NeList.just)
+                (advertiseIcon |> NeList.just)
                (ToggleAdvert |> wrap |> Just)
            ]
        ]
@@ -133,7 +133,7 @@ viewStage wrapGame shared lobbyModel =
                    Pregame.view shared lobby

        Nothing ->
-            [ Icon.viewStyled [ Icon.spin ] Icon.sync ]
+            [ Icon.loading |> Icon.view ]


 advertise : Shared -> GameCode -> List (Html msg)
@@ -1,13 +1,13 @@
 module MassiveDecks.Pages.Lobby.Spectate.Stages.Postgame exposing (view)

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Keyed as HtmlK
 import MassiveDecks.Game.Model exposing (Game)
 import MassiveDecks.Game.Player exposing (Player)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.Model exposing (Lobby)
 import MassiveDecks.Strings as Strings
@@ -52,16 +52,16 @@ viewPlayer shared winner ( id, user, player ) =
        icon =
            case user.control of
                User.Human ->
-                    Icon.user
+                    Icon.human

                User.Computer ->
-                    Icon.robot
+                    Icon.computer
    in
    ( id
    , Html.li [ HtmlA.class "player" ]
        [ Html.span [ HtmlA.class "head" ]
-            [ Icon.viewIcon Icon.trophy |> Maybe.justIf (Set.member id winner) |> Maybe.withDefault Html.nothing
-            , Icon.viewIcon icon
+            [ Icon.view Icon.win |> Maybe.justIf (Set.member id winner) |> Maybe.withDefault Html.nothing
+            , Icon.view icon
            ]
        , Html.span [ HtmlA.class "name" ]
            [ user.name |> Html.text
@@ -1,11 +1,11 @@
 module MassiveDecks.Pages.Lobby.Spectate.Stages.Pregame exposing (view)

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Keyed as HtmlK
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.Model exposing (Lobby)
 import MassiveDecks.Strings as Strings
@@ -38,15 +38,15 @@ player _ ( id, user ) =
                icon =
                    case user.control of
                        User.Human ->
-                            Icon.user
+                            Icon.human

                        User.Computer ->
-                            Icon.robot
+                            Icon.computer
            in
            Just
                ( id
                , Html.li [ HtmlA.class "player" ]
-                    [ Icon.viewStyled [ SvgA.class "head" ] icon
+                    [ icon |> Icon.styled [ SvgA.class "head" ] |> Icon.view
                    , Html.span [ HtmlA.class "name" ] [ user.name |> Html.text ]
                    ]
                )
@@ -1,8 +1,7 @@
 module MassiveDecks.Pages.Lobby.Spectate.Stages.Round exposing (view)

 import Dict exposing (Dict)
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -16,6 +15,7 @@ import MassiveDecks.Game.Action.Model as Action
 import MassiveDecks.Game.Messages as Game
 import MassiveDecks.Game.Model as Game
 import MassiveDecks.Game.Round as Round exposing (Round)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.Configure.Model exposing (Config)
 import MassiveDecks.Strings as Strings
@@ -227,7 +227,7 @@ viewPlay wrapGame shared config slotCount angle playedByUser isWinner picked lik
        [ Html.div [ HtmlA.class "with-byline", action |> Maybe.withDefault (HtmlA.disabled True) ]
            [ Html.span [ HtmlA.class "byline" ]
                (List.filterMap identity
-                    [ Icon.viewIcon Icon.trophy |> Maybe.justIf isWinner
+                    [ Icon.view Icon.win |> Maybe.justIf isWinner
                    , playedByUser |> Maybe.map (.name >> Html.text)
                    , likes |> Maybe.map (\l -> Strings.Likes { total = l } |> Lang.html shared)
                    ]
@@ -9,9 +9,8 @@ module MassiveDecks.Pages.Start exposing

 import Browser.Navigation as Navigation
 import Dict
+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -204,7 +203,7 @@ view shared model =
                Html.blankA
                    [ HtmlA.href baseUrl, HtmlA.id "many-decks-ad", Strings.ManyDecksWhereToGet |> Lang.title shared ]
                    [ Html.div []
-                        [ Icon.boxOpen |> Icon.viewIcon
+                        [ Icon.manyDecks |> Icon.view
                        , Html.span [] [ Strings.ManyDecks |> Lang.string shared |> Html.text ]
                        ]
                    ]
@@ -256,13 +255,13 @@ view shared model =
                    , Strings.MDProject |> Lang.title shared
                    , HtmlA.href "https://github.com/Lattyware/massivedecks"
                    ]
-                    [ Icon.viewStyled [ Strings.MDLogoDescription |> Lang.alt shared ] Icon.massiveDecks ]
+                    [ Icon.massiveDecks |> Icon.styled [ Strings.MDLogoDescription |> Lang.alt shared ] |> Icon.view ]
                , Html.blankA
                    [ HtmlA.class "logo"
                    , Strings.DevelopedByReread |> Lang.title shared
                    , HtmlA.href "https://www.rereadgames.com/"
                    ]
-                    [ Icon.viewStyled [ Strings.RereadLogoDescription |> Lang.alt shared ] Icon.rereadGames ]
+                    [ Icon.rereadGames |> Icon.styled [ Strings.RereadLogoDescription |> Lang.alt shared ] |> Icon.view ]
                ]
            , Html.p [ HtmlA.class "version" ]
                [ Html.text "\""
@@ -285,16 +284,16 @@ tabFor : Section -> Tabs.TabModel
 tabFor section =
    case section of
        New ->
-            Tabs.TabModel Strings.NewGame (Just Icon.plus)
+            Tabs.TabModel Strings.NewGame (Just Icon.new)

        Join _ ->
-            Tabs.TabModel Strings.JoinPrivateGame (Just Icon.signInAlt)
+            Tabs.TabModel Strings.JoinPrivateGame (Just Icon.join)

        Find ->
-            Tabs.TabModel Strings.FindPublicGame (Just Icon.search)
+            Tabs.TabModel Strings.FindPublicGame (Just Icon.find)

        About ->
-            Tabs.TabModel Strings.AboutTheGame (Just Icon.questionCircle)
+            Tabs.TabModel Strings.AboutTheGame (Just Icon.about)


 overlay : Shared -> Maybe MdString -> Html Global.Msg
@@ -304,7 +303,7 @@ overlay shared content =
            Html.div [ HtmlA.id "overlay" ]
                [ IconButton.view shared
                    Strings.Close
-                    (Icon.times |> Icon.present |> NeList.just)
+                    (Icon.close |> NeList.just)
                    (HideOverlay |> Global.StartMsg |> Just)
                , Card.view []
                    [ text |> Lang.html shared
@@ -407,10 +406,10 @@ newContent shared model =

        buttonIcon =
            if loading then
-                Icon.viewStyled [ Icon.spin ] Icon.circleNotch
+                Icon.loading |> Icon.view

            else
-                Icon.viewIcon Icon.play
+                Icon.view Icon.start

        error =
            model.newLobbyRequest.generalError
@@ -448,10 +447,10 @@ joinContent shared model =

        buttonIcon =
            if loading then
-                Icon.viewStyled [ Icon.spin ] Icon.circleNotch
+                Icon.loading |> Icon.view

            else
-                Icon.viewIcon Icon.play
+                Icon.view Icon.start

        error =
            model.joinLobbyRequest.generalError
@@ -5,12 +5,12 @@ module MassiveDecks.Pages.Start.LobbyBrowser exposing
    , view
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Keyed as HtmlK
 import Http
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Messages as Global
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Lobby.GameCode as GameCode
@@ -100,7 +100,7 @@ lobbyList shared summaries =
 emptyContent : Shared -> Html Global.Msg
 emptyContent shared =
    Html.div [ HtmlA.class "empty-info" ]
-        [ Icon.viewIcon Icon.ghost
+        [ Icon.view Icon.empty
        , NoPublicGames |> Lang.html shared
        , Html.text " "
        , Html.a [ Route.Start { section = Start.New } |> Route.href ] [ StartYourOwn |> Lang.html shared ]
@@ -170,12 +170,13 @@ lobby shared data =
         ]
            |> Just
        )
-        ([ Icon.viewStyled [ HtmlA.title "Join Game" ] Icon.signInAlt ] |> Just)
+        ([ Icon.join |> Icon.styled [ HtmlA.title "Join Game" ] |> Icon.view ] |> Just)
        [ Html.span [ HtmlA.class "lobby-name" ]
            [ Html.text data.name
            , Html.text " "
            , Icon.lock
-                |> Icon.viewStyled [ Strings.LobbyRequiresPassword |> Lang.title shared ]
+                |> Icon.styled [ Strings.LobbyRequiresPassword |> Lang.title shared ]
+                |> Icon.view
                |> Maybe.justIf data.password
                |> Maybe.withDefault Html.nothing
            ]
@@ -5,10 +5,10 @@ module MassiveDecks.Pages.Unknown exposing
    , view
    )

-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Messages exposing (..)
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Route as Route
@@ -39,7 +39,7 @@ view : Shared -> Model -> List (Html Msg)
 view shared _ =
    [ Html.div [ HtmlA.class "page unknown-page" ]
        [ Card.view []
-            [ Html.h1 [] [ Icon.viewIcon Icon.exclamationCircle, Lang.html shared Strings.UnknownPageTitle ]
+            [ Html.h1 [] [ Icon.view Icon.warning, Lang.html shared Strings.UnknownPageTitle ]
            , Html.p []
                [ Html.a [ Route.url (Route.Start { section = Start.New }) |> HtmlA.href ]
                    [ Lang.html shared Strings.GoBackHome
@@ -8,12 +8,12 @@ module MassiveDecks.Requests.HttpData exposing
    , view
    )

+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Error as Error
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Route exposing (Route)
 import MassiveDecks.Requests.HttpData.Messages exposing (..)
@@ -121,5 +121,5 @@ refreshButton shared { loading } =
    in
    IconButton.view shared
        Strings.Refresh
-        (Icon.sync |> Icon.present |> applyStyle |> NeList.just)
+        (Icon.refresh |> applyStyle |> NeList.just)
        (Pull |> Maybe.justIf (not loading))
@@ -12,9 +12,8 @@ module MassiveDecks.Settings exposing

 import Dict exposing (Dict)
 import Dict.Extra as Dict
+import FontAwesome as Icon
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -162,15 +161,15 @@ view wrap shared =

        icon =
            if model.open then
-                Icon.check
+                Icon.accept

            else
-                Icon.cog
+                Icon.configure

        button =
            IconButton.view shared
                Strings.SettingsTitle
-                (icon |> Icon.present |> Icon.styled [ Icon.lg ] |> NeList.just)
+                (icon |> Icon.styled [ Icon.lg ] |> NeList.just)
                (ToggleOpen |> wrap |> Just)

        panel =
@@ -297,14 +296,13 @@ cardSize wrap shared =
            [ HtmlA.class "multipart" ]
            [ Html.div
                [ HtmlA.class "card-size-slider" ]
-                [ Icon.viewStyled [] Icon.minimalCardSize
+                [ Icon.minimalCardSize |> Icon.view
                , Slider.view
                    [ HtmlA.class "primary"
                    , Slider.step 1
                    , Slider.min 1
                    , Slider.max 3
-                    , Slider.pin
-                    , Slider.markers
+                    , Slider.withTickMarks 3
                    , cardSizeFromValue
                        >> Maybe.withDefault Full
                        >> ChangeCardSize
@@ -312,7 +310,7 @@ cardSize wrap shared =
                        |> Slider.onChange
                    , settings.cardSize |> cardSizeToValue |> Slider.value
                    ]
-                , Icon.viewStyled [] Icon.callCard
+                , Icon.callCard |> Icon.view
                ]
            ]
        )
@@ -325,7 +323,8 @@ autoAdvanceRound wrap shared =
        settings =
            shared.settings.settings

-        currentValue = settings.autoAdvance |> Maybe.withDefault False
+        currentValue =
+            settings.autoAdvance |> Maybe.withDefault False
    in
    Form.section shared
        "auto-advance"
@@ -333,11 +332,11 @@ autoAdvanceRound wrap shared =
            [ HtmlA.class "multipart" ]
            [ Switch.view
                [ HtmlE.onClick (currentValue |> not |> ToggleAutoAdvance >> wrap)
-                , HtmlA.selected (currentValue)
+                , HtmlA.selected currentValue
                , HtmlA.id "auto-advance-enable"
                ]
            , Html.label [ HtmlA.for "auto-advance-enable" ]
-                [ Icon.viewIcon Icon.commentDots
+                [ Icon.view Icon.autoAdvance
                , Html.text " "
                , Strings.AutoAdvanceSetting |> Lang.html shared
                ]
@@ -387,7 +386,7 @@ speechVoiceSelector wrap shared =
                        , HtmlA.id "speech-enable"
                        ]
                    , Html.label [ HtmlA.for "speech-enable" ]
-                        [ Icon.viewIcon Icon.commentDots
+                        [ Icon.view Icon.tts
                        , Html.text " "
                        , Strings.SpeechSetting |> Lang.html shared
                        ]
@@ -489,7 +488,7 @@ notificationsSwitch wrap shared =
                    , HtmlA.id "notifications-enable"
                    ]
                , Html.label [ HtmlA.for "notifications-enable" ]
-                    [ Icon.viewIcon Icon.bell
+                    [ Icon.view Icon.notification
                    , Html.text " "
                    , Strings.NotificationsSetting |> Lang.html shared
                    ]
@@ -507,7 +506,7 @@ notificationsSwitch wrap shared =
                            , HtmlA.id "only-when-hidden-toggle"
                            ]
                        , Html.label [ HtmlA.for "only-when-hidden-toggle" ]
-                            [ Icon.viewIcon Icon.eyeSlash
+                            [ Icon.view Icon.hide
                            , Html.text " "
                            , Strings.NotificationOnlyWhenHiddenSetting |> Lang.html shared
                            ]
@@ -1,8 +1,7 @@
 module MassiveDecks.Strings.Render exposing (Context, asHtml, asString)

+import FontAwesome as Icon exposing (Icon)
 import FontAwesome.Brands as Icon
-import FontAwesome.Icon as Icon exposing (Icon)
-import FontAwesome.Solid as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Icon as Icon
@@ -122,7 +121,7 @@ resultToHtml shared context result =
                        [ HtmlA.href "https://github.com/Lattyware/massivedecks/wiki/Translation"
                        , Strings.TranslationBeg |> asString context |> HtmlA.title
                        ]
-                        [ Icon.language |> Icon.viewIcon ]
+                        [ Icon.language |> Icon.view ]
            in
            [ Html.span [ HtmlA.class "not-translated" ] [ english, Html.text " ", translationBeg ] ]

@@ -139,16 +138,16 @@ enhanceHtml shared context mdString unenhanced =
                    term context ResponseDescription Icon.responseCard unenhanced

                Point ->
-                    term context PointDescription Icon.star unenhanced
+                    term context PointDescription Icon.point unenhanced

                _ ->
                    unenhanced

        Czar ->
-            term context CzarDescription Icon.gavel unenhanced
+            term context CzarDescription Icon.czar unenhanced

        GameCodeTerm ->
-            term context GameCodeDescription Icon.qrcode unenhanced
+            term context GameCodeDescription Icon.gameCode unenhanced

        GameCode _ ->
            [ Html.span
@@ -166,58 +165,58 @@ enhanceHtml shared context mdString unenhanced =
            [ Html.span [ HtmlA.class "instruction", DrawDescription numberOfCards |> asString context |> HtmlA.title ] unenhanced ]

        Players ->
-            term context PlayersDescription Icon.chessPawn unenhanced
+            term context PlayersDescription Icon.player unenhanced

        Spectators ->
-            term context SpectatorsDescription Icon.eye unenhanced
+            term context SpectatorsDescription Icon.spectator unenhanced

        Left ->
-            term context LeftDescription Icon.signOutAlt unenhanced
+            term context LeftDescription Icon.leave unenhanced

        Away ->
-            term context AwayDescription Icon.userClock unenhanced
+            term context AwayDescription Icon.userAway unenhanced

        Disconnected ->
-            term context DisconnectedDescription Icon.ghost unenhanced
+            term context DisconnectedDescription Icon.disconnected unenhanced

        Privileged ->
-            term context PrivilegedDescription Icon.userCog unenhanced
+            term context PrivilegedDescription Icon.configure unenhanced

        Ai ->
-            term context AiDescription Icon.robot unenhanced
+            term context AiDescription Icon.computer unenhanced

        Score _ ->
-            [ Html.span [ HtmlA.class "no-wrap", (ScoreDescription |> asString context) |> HtmlA.title ] (suffixed unenhanced Icon.star) ]
+            [ Html.span [ HtmlA.class "no-wrap", (ScoreDescription |> asString context) |> HtmlA.title ] (suffixed unenhanced Icon.point) ]

        Likes _ ->
-            [ Html.span [ HtmlA.class "no-wrap", (LikesDescription |> asString context) |> HtmlA.title ] (suffixed unenhanced Icon.thumbsUp) ]
+            [ Html.span [ HtmlA.class "no-wrap", (LikesDescription |> asString context) |> HtmlA.title ] (suffixed unenhanced Icon.like) ]

        NumberOfCards _ ->
            [ Html.span [ HtmlA.class "amount" ] unenhanced ]

        HouseRulePackingHeat ->
-            prefixed unenhanced Icon.parachuteBox
+            prefixed unenhanced Icon.packingHeat

        HouseRuleReboot ->
            prefixed unenhanced Icon.random

        HouseRuleComedyWriter ->
-            prefixed unenhanced Icon.pen
+            prefixed unenhanced Icon.edit

        HouseRuleRandoCardrissian ->
-            prefixed unenhanced Icon.robot
+            prefixed unenhanced Icon.computer

        HouseRuleNeverHaveIEver ->
-            prefixed unenhanced Icon.trash
+            prefixed unenhanced Icon.discard

        HouseRuleHappyEnding ->
-            prefixed unenhanced Icon.smile
+            prefixed unenhanced Icon.happyEnding

        HouseRuleCzarChoices ->
-            prefixed unenhanced Icon.clipboardList
+            prefixed unenhanced Icon.czarChoices

        HouseRuleWinnersPick ->
-            prefixed unenhanced Icon.trophy
+            prefixed unenhanced Icon.win

        RereadGames ->
            [ Html.blankA [ HtmlA.class "no-wrap", HtmlA.href "https://www.rereadgames.com/" ] unenhanced ]
@@ -235,22 +234,22 @@ enhanceHtml shared context mdString unenhanced =
            [ Html.blankA [ HtmlA.href "https://twitter.com/Massive_Decks" ] (suffixed unenhanced Icon.twitter) ]

        Error ->
-            prefixed unenhanced Icon.exclamationTriangle
+            prefixed unenhanced Icon.bug

        ErrorHelpTitle ->
-            prefixed unenhanced Icon.carCrash
+            prefixed unenhanced Icon.warning

        ReportError ->
            prefixed unenhanced Icon.bug

        SettingsTitle ->
-            prefixed unenhanced Icon.cog
+            prefixed unenhanced Icon.configure

        StillPlaying ->
-            term context PlayingDescription Icon.clock unenhanced
+            term context PlayingDescription Icon.waiting unenhanced

        Played ->
-            term context PlayedDescription Icon.check unenhanced
+            term context PlayedDescription Icon.played unenhanced

        ManyDecks ->
            case shared.sources.manyDecks of
@@ -272,21 +271,21 @@ enhanceHtml shared context mdString unenhanced =
            unenhanced


-prefixed : List (Html msg) -> Icon -> List (Html msg)
+prefixed : List (Html msg) -> Icon Icon.WithoutId -> List (Html msg)
 prefixed base prefix =
-    Html.span [ HtmlA.class "icon-prefix" ] [ Icon.viewIcon prefix, Html.text " " ] :: base
+    Html.span [ HtmlA.class "icon-prefix" ] [ Icon.view prefix, Html.text " " ] :: base


-suffixed : List (Html msg) -> Icon -> List (Html msg)
+suffixed : List (Html msg) -> Icon Icon.WithoutId -> List (Html msg)
 suffixed base suffix =
-    base ++ [ Html.span [ HtmlA.class "icon-suffix" ] [ Html.text " ", Icon.viewIcon suffix ] ]
+    base ++ [ Html.span [ HtmlA.class "icon-suffix" ] [ Html.text " ", Icon.view suffix ] ]


-term : Context langContext -> MdString -> Icon -> List (Html msg) -> List (Html msg)
+term : Context langContext -> MdString -> Icon Icon.WithoutId -> List (Html msg) -> List (Html msg)
 term context description icon unenhanced =
    [ Html.span
        [ HtmlA.class "term", description |> asString context |> HtmlA.title ]
        [ Html.span [ HtmlA.class "full" ] unenhanced
-        , Html.span [ HtmlA.class "icon-suffix" ] [ Html.text " ", Icon.viewIcon icon ]
+        , Html.span [ HtmlA.class "icon-suffix" ] [ Html.text " ", Icon.view icon ]
        ]
    ]
@@ -3,7 +3,7 @@ module Material.Fab exposing
    , view
    )

-import FontAwesome.Icon as Icon
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -19,7 +19,7 @@ type Type
    | Mini


-view : Shared -> Type -> MdString -> Icon.Presentation id msg -> Maybe msg -> List (Html.Attribute msg) -> Html msg
+view : Shared -> Type -> MdString -> Icon hasId -> Maybe msg -> List (Html.Attribute msg) -> Html msg
 view shared type_ title icon action attrs =
    let
        content =
@@ -4,7 +4,7 @@ module Material.IconButton exposing
    , viewNoPropagation
    )

-import FontAwesome.Icon as Icon
+import FontAwesome as Icon exposing (Icon)
 import FontAwesome.Layering as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
@@ -18,14 +18,14 @@ import MassiveDecks.Util.NeList exposing (NeList(..))

 {-| View a button that displays as a simple icon.
 -}
-view : Shared -> MdString -> NeList (Icon.Presentation id msg) -> Maybe msg -> Html msg
+view : Shared -> MdString -> NeList (Icon hasId) -> Maybe msg -> Html msg
 view shared title icon action =
    viewRenderedIcon [ actionAttrFromMaybe HtmlE.onClick action ] shared title (renderIcon icon)


 {-| View a button that displays as a simple icon, and blocks clicks propagating to other elements.
 -}
-viewNoPropagation : Shared -> MdString -> NeList (Icon.Presentation id msg) -> Maybe msg -> Html msg
+viewNoPropagation : Shared -> MdString -> NeList (Icon hasId) -> Maybe msg -> Html msg
 viewNoPropagation shared title icon action =
    viewRenderedIcon [ actionAttrFromMaybe HtmlE.onClickNoPropagation action ] shared title (renderIcon icon)

@@ -51,7 +51,7 @@ actionAttrFromMaybe onClick action =
            HtmlA.disabled True


-renderIcon : NeList (Icon.Presentation id msg) -> Html msg
+renderIcon : NeList (Icon hasId) -> Html msg
 renderIcon (NeList first rest) =
    case rest of
        [] ->
@@ -6,7 +6,7 @@ module Material.ListView exposing
    , viewItem
    )

-import FontAwesome.Icon as Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -55,11 +55,11 @@ action a =

 {-| An item within a list.
 -}
-viewItem : Action msg -> Maybe Icon -> String -> Maybe (List (Html msg)) -> Maybe (List (Html msg)) -> List (Html msg) -> Html msg
+viewItem : Action msg -> Maybe (Icon hasId) -> String -> Maybe (List (Html msg)) -> Maybe (List (Html msg)) -> List (Html msg) -> Html msg
 viewItem action_ icon title secondary meta children =
    let
        ( optionalAttrs, optionalSlots ) =
-            [ icon |> Maybe.map (\i -> ( HtmlA.attribute "graphic" "large", Icon.viewStyled [ HtmlA.slot "graphic" ] i ))
+            [ icon |> Maybe.map (\i -> ( HtmlA.attribute "graphic" "large", i |> Icon.styled [ HtmlA.slot "graphic" ] |> Icon.view ))
            , meta |> Maybe.map (\m -> ( True |> Json.bool |> HtmlA.property "hasMeta", Html.span [ HtmlA.slot "meta" ] m ))
            , secondary |> Maybe.map (\s -> ( True |> Json.bool |> HtmlA.property "twoline", Html.span [ HtmlA.slot "secondary" ] s ))
            ]
@@ -1,12 +1,12 @@
 module Material.Slider exposing
-    ( markers
+    ( discrete
    , max
    , min
    , onChange
-    , pin
    , step
    , value
    , view
+    , withTickMarks
    )

 import Html exposing (Html)
@@ -36,14 +36,9 @@ max =
    Json.int >> HtmlA.property "max"


-markers : Html.Attribute msg
-markers =
-    True |> Json.bool |> HtmlA.property "markers"
-
-
-pin : Html.Attribute msg
-pin =
-    True |> Json.bool |> HtmlA.property "pin"
+withTickMarks : Int -> Html.Attribute msg
+withTickMarks =
+    Json.int >> HtmlA.property "withTickMarks"


 value : Int -> Html.Attribute msg
@@ -51,6 +46,11 @@ value =
    Json.int >> HtmlA.property "value"


+discrete : Bool -> Html.Attribute msg
+discrete =
+    Json.bool >> HtmlA.property "discrete"
+
+
 onChange : (Int -> msg) -> Html.Attribute msg
 onChange wrap =
    Json.Decode.at [ "target", "value" ] Json.Decode.int |> Json.Decode.map wrap |> HtmlE.on "change"
@@ -4,7 +4,7 @@ module Material.Tabs exposing
    , view
    )

-import FontAwesome.Icon as Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -34,7 +34,7 @@ type alias Model id msg =
 -}
 type alias TabModel =
    { label : MdString
-    , icon : Maybe Icon
+    , icon : Maybe (Icon Icon.WithoutId)
    }


@@ -56,7 +56,7 @@ view shared { selected, change, ids, tab, equals } =
                ( iconAttr, iconNode ) =
                    case icon of
                        Just i ->
-                            ( hasImageIcon, Icon.viewStyled [ HtmlA.slot "icon" ] i )
+                            ( hasImageIcon, i |> Icon.styled [ HtmlA.slot "icon" ] |> Icon.view )

                        Nothing ->
                            ( HtmlA.nothing, Html.nothing )
@@ -10,7 +10,7 @@
@use "_settings";
@use "_error";

-@import "~@fortawesome/fontawesome-free/css/svg-with-js.min.css";
+@use "@fortawesome/fontawesome-svg-core/styles.css";

 $min-page-width: 320px;

@@ -2622,32 +2622,32 @@
    "node_modules/lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
    },
    "node_modules/lodash.isboolean": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
    },
    "node_modules/lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
    },
    "node_modules/lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
    },
    "node_modules/lodash.isplainobject": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
    },
    "node_modules/lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
@@ -2658,7 +2658,7 @@
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
    },
    "node_modules/logform": {
      "version": "2.4.0",
@@ -3921,9 +3921,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "4.8.0-dev.20220529",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.0-dev.20220529.tgz",
-      "integrity": "sha512-Qwj3szAlVVhUj9+dAAh7MiPMgnzMaaQGiXQsrhveTWj3FXvtJ7H4Q0lCcyTVSS55a9nVOZJPUzDePWJKG8v0VA==",
+      "version": "4.8.0-dev.20220530",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.0-dev.20220530.tgz",
+      "integrity": "sha512-NB9F5TGowxNmBQ9GY/ufx1dreQby8NuzdtuogOEFFsK1SruBRlmCCUX6YkrTUK76WnhEoSzoLGGFj45qb8wfbw==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
@@ -6152,32 +6152,32 @@
    "lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
    },
    "lodash.isboolean": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
    },
    "lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
    },
    "lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
    },
    "lodash.isplainobject": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
    },
    "lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
    },
    "lodash.merge": {
      "version": "4.6.2",
@@ -6188,7 +6188,7 @@
    "lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
    },
    "logform": {
      "version": "2.4.0",
@@ -7107,9 +7107,9 @@
      }
    },
    "typescript": {
-      "version": "4.8.0-dev.20220529",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.0-dev.20220529.tgz",
-      "integrity": "sha512-Qwj3szAlVVhUj9+dAAh7MiPMgnzMaaQGiXQsrhveTWj3FXvtJ7H4Q0lCcyTVSS55a9nVOZJPUzDePWJKG8v0VA==",
+      "version": "4.8.0-dev.20220530",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.0-dev.20220530.tgz",
+      "integrity": "sha512-NB9F5TGowxNmBQ9GY/ufx1dreQby8NuzdtuogOEFFsK1SruBRlmCCUX6YkrTUK76WnhEoSzoLGGFj45qb8wfbw==",
      "dev": true
    },
    "undefsafe": {