De-duplicate icons using Compound Design Tokens

res/css/_common.pcss

@@ -186,7 +186,7 @@ input[type="search"].mx_textinput_icon {
 /* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
 input[type="text"].mx_textinput_icon.mx_textinput_search,
 input[type="search"].mx_textinput_icon.mx_textinput_search {
-    background-image: url("$(res)/img/feather-customised/search-input.svg");
+    background-image: url("@vector-im/compound-design-tokens/icons/search.svg");
 }
 
 /* dont search UI as not all browsers support it, */

res/css/components/views/polls/_PollOption.pcss

@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
             border-width: 2px;
             border-color: var(--cpd-color-icon-accent-tertiary);
             background-color: var(--cpd-color-icon-accent-tertiary);
-            background-image: url("$(res)/img/element-icons/check-white.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
             background-size: 12px;
             background-repeat: no-repeat;
             background-position: center;

res/css/structures/_GenericDropdownMenu.pcss

@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
     width: 18px;
     height: 18px;
     background: currentColor;
-    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
     mask-size: 100%;
     mask-repeat: no-repeat;
     float: right;
@@ -103,7 +103,7 @@ Please see LICENSE files in the repository root for full details.
                 height: 12px;
                 margin-left: -20px;
                 margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

res/css/structures/_RightPanel.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_threadsButton::before {
-    mask-image: url("$(res)/img/element-icons/room/thread.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RightPanel_roomSummaryButton::before {
-    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
     mask-position: center;
 }
 

res/css/structures/_RoomSearch.pcss

@@ -26,12 +26,13 @@ Please see LICENSE files in the repository root for full details.
     .mx_RoomSearch_icon {
         width: 16px;
         height: 16px;
-        mask: url("$(res)/img/element-icons/roomlist/search.svg");
+        mask: url("@vector-im/compound-design-tokens/icons/search.svg");
         mask-repeat: no-repeat;
         background-color: $secondary-content;
         margin-left: 7px;
         margin-bottom: 2px;
         flex-shrink: 0;
+        mask-size: 20px;
     }
 
     .mx_RoomSearch_spotlightTriggerText {

res/css/structures/_RoomStatusBar.pcss

@@ -118,14 +118,14 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("$(res)/img/element-icons/trashcan.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
             }
 
             &.mx_RoomStatusBar_unsentRetry {
                 padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
 
                 &::before {
-                    mask-image: url("$(res)/img/element-icons/retry.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
                 }
             }
         }

res/css/structures/_RoomView.pcss

@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
 
     &::before {
         background-color: $info-plinth-fg-color;
-        mask: url("$(res)/img/feather-customised/search-input.svg");
+        mask: url("@vector-im/compound-design-tokens/icons/search.svg");
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 50px;

res/css/structures/_SpaceHierarchy.pcss

@@ -121,7 +121,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $tertiary-content;
             mask-size: 16px;
             transform: rotate(270deg);
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
         }
 
         &.mx_SpaceHierarchy_subspace_toggle_shown::before {
@@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
                                 mask-size: contain;
                                 mask-repeat: no-repeat;
                                 background-color: $accent;
-                                mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+                                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                             }
                         }
                     }

res/css/structures/_SpacePanel.pcss

@@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
             mask-size: contain;
             mask-repeat: no-repeat;
             background-color: $background;
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
             transform: rotate(270deg);
         }
 
@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
             mask-size: 20px;
             mask-repeat: no-repeat;
             background-color: $tertiary-content;
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
         }
 
         .mx_SpaceButton_icon {
@@ -207,15 +207,15 @@ 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 {
-            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
         }
 
         &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             &::before {
                 background-color: $primary-content;
-                mask-image: url("$(res)/img/element-icons/plus.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
                 transition: all 0.2s ease-in-out; /* TODO transition */
             }
         }
@@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
                 mask-position: center;
                 mask-size: contain;
                 mask-repeat: no-repeat;
-                mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                 background: $primary-content;
             }
         }
@@ -414,27 +414,27 @@ 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 {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_SpacePanel_iconMembers::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url("$(res)/img/element-icons/plus.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
     }
 
     .mx_SpacePanel_iconExplore::before {

res/css/structures/_SpaceRoomView.pcss

@@ -221,7 +221,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");
                     }
                 }
             }
@@ -247,7 +247,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

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,19 +185,19 @@ 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 {
         mask-image: url("$(res)/img/element-icons/feedback.svg");
     }
 
     .mx_UserMenu_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
     }
 
     .mx_UserMenu_iconQr::before {

res/css/views/audio_messages/_PlayPauseButton.pcss

@@ -21,25 +21,21 @@ Please see LICENSE files in the repository root for full details.
         background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
+        top: 6px; /* center */
+        left: 6px; /* center */
+        width: 20px;
+        height: 20px;
     }
 
     &.mx_PlayPauseButton_disabled::before {
         opacity: 0.5;
     }
 
     &.mx_PlayPauseButton_play::before {
-        width: 13px;
-        height: 16px;
-        top: 8px; /* center */
-        left: 12px; /* center */
-        mask-image: url("$(res)/img/element-icons/play.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
     }
 
     &.mx_PlayPauseButton_pause::before {
-        width: 10px;
-        height: 12px;
-        top: 10px; /* center */
-        left: 11px; /* center */
-        mask-image: url("$(res)/img/element-icons/pause.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
     }
 }

res/css/views/context_menus/_IconizedContextMenu.pcss

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

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -25,15 +25,15 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
     }
 
     .mx_MessageContextMenu_iconReport::before {
         mask-image: url("$(res)/img/element-icons/warning-badge.svg");
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -49,19 +49,19 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconEndPoll::before {
-        mask-image: url("$(res)/img/element-icons/check-white.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("$(res)/img/element-icons/message/fwd.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("$(res)/img/element-icons/trashcan.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
     }
 
     .mx_MessageContextMenu_iconResend::before {
-        mask-image: url("$(res)/img/element-icons/retry.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
     }
 
     .mx_MessageContextMenu_iconSource::before {
@@ -94,11 +94,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("$(res)/img/element-icons/message/thread.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
     }
 
     .mx_MessageContextMenu_iconReact::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -1,5 +1,5 @@
 .mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,7 +31,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconPeople::before {
-    mask-image: url("$(res)/img/element-icons/room/members.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
@@ -43,29 +43,29 @@
 }
 
 .mx_RoomGeneralContextMenu_iconWidgets::before {
-    mask-image: url("$(res)/img/element-icons/room/apps.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
 }
 
 .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 {
-    mask-image: url("$(res)/img/element-icons/export.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconDeveloperTools::before {
     mask-image: url("$(res)/img/element-icons/settings/flask.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("$(res)/img/element-icons/leave.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
 }