Standardise icons using Compound Design Tokens

res/css/components/views/location/_MapError.pcss

@@ -53,8 +53,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MapError_icon {
     height: var(--mx-map-error-icon-size);
-
-    path {
-        fill: var(--mx-map-error-icon-color);
-    }
+    width: var(--mx-map-error-icon-size);
+    color: var(--mx-map-error-icon-color);
 }

res/css/structures/_LeftPanel.pcss

@@ -176,7 +176,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_LeftPanel_recentsButton::before {
-                mask-image: url("$(res)/img/element-icons/clock.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
             }
         }
 

res/css/structures/_SpacePanel.pcss

@@ -207,7 +207,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/home.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
@@ -414,15 +414,15 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconHome::before {
-        mask-image: url("$(res)/img/element-icons/home.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
     }
 
     .mx_SpacePanel_iconInvite::before {
         mask-image: url("$(res)/img/element-icons/room/invite.svg");
     }
 
     .mx_SpacePanel_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_SpacePanel_iconLeave::before {

res/css/structures/_SpaceRoomView.pcss

@@ -27,13 +27,14 @@ Please see LICENSE files in the repository root for full details.
     &::before {
         position: absolute;
         content: "";
-        width: 24px;
-        height: 24px;
-        top: 27px;
-        left: 20px;
+        width: 28px;
+        height: 28px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 22px;
         mask-position: center;
         mask-repeat: no-repeat;
-        mask-size: 24px;
+        mask-size: 28px;
         background-color: $tertiary-content;
     }
 
@@ -221,7 +222,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 24px;
                         background: $tertiary-content;
                         mask-size: contain;
-                        mask-image: url("$(res)/img/element-icons/settings.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
                     }
                 }
             }

res/css/structures/_UserMenu.pcss

@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconHome::before {
-        mask-image: url("$(res)/img/element-icons/home.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
     }
 
     .mx_UserMenu_iconDnd::before {
@@ -185,11 +185,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconLock::before {
-        mask-image: url("$(res)/img/element-icons/security.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
     }
 
     .mx_UserMenu_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_UserMenu_iconMessage::before {

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
         mask-size: contain;
         mask-repeat: no-repeat;
         background: $secondary-content;
-        mask-image: url("$(res)/img/globe.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     .mx_DecoratedRoomAvatar_icon_offline::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -35,7 +35,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
-    mask-image: url("$(res)/img/element-icons/room/files.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconPins::before {
@@ -47,7 +47,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {

res/css/views/dialogs/_JoinRuleDropdown.pcss

@@ -41,14 +41,13 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_JoinRuleDropdown_invite::before {
         box-sizing: border-box;
-        mask-image: url("$(res)/img/element-icons/lock.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
         mask-size: contain;
         padding: 1px;
     }
 
     .mx_JoinRuleDropdown_public::before {
-        mask-image: url("$(res)/img/globe.svg");
-        mask-size: 12px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     .mx_JoinRuleDropdown_restricted::before {

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -9,15 +9,15 @@ Please see LICENSE files in the repository root for full details.
 /* ========================================================== */
 
 .mx_RoomSettingsDialog_settingsIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
 }
 
 .mx_RoomSettingsDialog_voiceIcon::before {
     mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
 }
 
 .mx_RoomSettingsDialog_securityIcon::before {
-    mask-image: url("$(res)/img/element-icons/security.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
 }
 
 .mx_RoomSettingsDialog_rolesIcon::before {
@@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
 .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
-    mask: url("$(res)/img/feather-customised/image.svg");
+    mask: url("@vector-im/compound-design-tokens/icons/image.svg");
     mask-repeat: no-repeat;
     mask-size: 36px;
     mask-position: center;

res/css/views/dialogs/_SpaceSettingsDialog.pcss

@@ -74,7 +74,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_TabbedView_tabLabel {
         .mx_SpaceSettingsDialog_generalIcon::before {
-            mask-image: url("$(res)/img/element-icons/settings.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
         }
 
         .mx_SpaceSettingsDialog_visibilityIcon::before {

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -508,7 +508,7 @@ Please see LICENSE files in the repository root for full details.
             mask-size: contain;
 
             &.mx_SpotlightDialog_metaspaceResult_home-space {
-                mask-image: url("$(res)/img/element-icons/home.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_favourites-space {

res/css/views/elements/_ImageView.pcss

@@ -125,7 +125,7 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_button_download::before {
-    mask-image: url("$(res)/img/image-view/download.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
 }
 
 .mx_ImageView_button_more::before {

res/css/views/elements/_MiniAvatarUploader.pcss

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-position: center;
             mask-repeat: no-repeat;
-            mask-image: url("$(res)/img/element-icons/camera.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
             mask-size: 16px;
             z-index: 2;
         }

res/css/views/elements/_UseCaseSelectionButton.pcss

@@ -48,7 +48,8 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_UseCaseSelectionButton_community::before {
-            mask-image: url("$(res)/img/globe.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
+            mask-size: 24px;
         }
     }
 

res/css/views/rooms/_MessageComposer.pcss

@@ -296,7 +296,7 @@ Please see LICENSE files in the repository root for full details.
         top: 8px;
         left: 9px;
 
-        mask-image: url("$(res)/img/element-icons/send-message.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;

res/css/views/rooms/_RoomCallBanner.pcss

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         background-color: $secondary-content;
         mask-size: 16px;
-        mask-position-y: center;
+        mask-position: center;
         width: 16px;
         height: 1.2em; /* to match line height */
         margin-right: 8px;

res/css/views/rooms/_RoomInfoLine.pcss

@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         display: inline-block;
         height: 1.2em;
-        mask-position-y: center;
+        mask-position: center;
         mask-repeat: no-repeat;
         background-color: $tertiary-content;
         vertical-align: text-bottom;
@@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
     &.mx_RoomInfoLine_public::before {
         width: 12px;
         mask-size: 12px;
-        mask-image: url("$(res)/img/globe.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     &.mx_RoomInfoLine_private::before {
         width: 10px;
         mask-size: 10px;
-        mask-image: url("$(res)/img/element-icons/lock.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
     }
 
     &.mx_RoomInfoLine_video::before {

res/css/views/rooms/_RoomTile.pcss

@@ -210,7 +210,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconFiles::before {
-        mask-image: url("$(res)/img/element-icons/room/files.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
     }
 
     .mx_RoomTile_iconPins::before {
@@ -222,7 +222,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_RoomTile_iconExport::before {

res/css/views/spaces/_SpaceBasicSettings.pcss

@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
-                mask-image: url("$(res)/img/element-icons/camera.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
             }
         }
 

res/css/views/spaces/_SpaceCreateMenu.pcss

@@ -39,12 +39,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceCreateMenuType_public::before {
-            mask-image: url("$(res)/img/globe.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
         }
 
         .mx_SpaceCreateMenuType_private::before {
-            mask-image: url("$(res)/img/element-icons/lock.svg");
-            mask-size: 18px;
+            mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
         }
 
         .mx_SpaceCreateMenu_back {

res/css/views/voip/_LegacyCallViewHeader.pcss

@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
 
     &.mx_LegacyCallViewHeader_button_fullscreen {
         &::before {
-            mask-image: url("$(res)/img/element-icons/call/fullscreen.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
         }
     }
 
@@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
 
     &.mx_LegacyCallViewHeader_button_expand {
         &::before {
-            mask-image: url("$(res)/img/element-icons/call/expand.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
         }
     }
 }