Standardise icons using Compound Design Tokens (#28286)

* Remove stale _LegacyRoomHeader.pcss and icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* De-duplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale _LegacyRoomHeader.pcss and icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ensure legacy header styles are not used by HTML export

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots & snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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);
-
+    width: var(--mx-map-error-icon-size);
-    path {
+    color: var(--mx-map-error-icon-color);
-        fill: 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,7 +414,7 @@ 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 {
@@ -422,7 +422,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .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;
+        width: 28px;
-        height: 24px;
+        height: 28px;
-        top: 27px;
+        top: 50%;
-        left: 20px;
+        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-image: url("@vector-im/compound-design-tokens/icons/public.svg");
-        mask-size: 12px;
     }
 
     .mx_JoinRuleDropdown_restricted::before {

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -9,7 +9,7 @@ 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 {
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .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-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-            mask-size: 18px;
         }
 
         .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");
         }
     }
 }

res/img/download.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="12px" height="14px" viewBox="-1 -1 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-    <title>Fill 75</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="currentColor">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(243.000000, 58.000000)">
-                <g id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap" transform="translate(1.000000, 181.000000)" sketch:type="MSShapeGroup">
-                    <g id="Group-Copy-13">
-                        <path d="M45.3400426,312.526774 C45.4870048,312.526774 45.633967,312.470898 45.7464849,312.35838 C45.9699899,312.134109 45.9699899,311.771296 45.7464849,311.547026 L41.3659396,307.168011 C41.1424345,306.943741 40.7788562,306.944506 40.5545857,307.167246 L36.1686823,311.540137 C35.9444119,311.764408 35.9436465,312.127986 36.1671515,312.352256 C36.3906565,312.577292 36.7542349,312.577292 36.9785053,312.353787 L40.3915495,308.950694 L40.3930804,318.425929 C40.3930804,318.742816 40.6510296,319 40.9671515,319 C41.2848042,319 41.5412226,318.742816 41.5412226,318.425929 L41.5396917,308.965237 L44.9343656,312.35838 C45.0461182,312.470898 45.1930804,312.526774 45.3400426,312.526774 L45.3400426,312.526774 Z" id="Fill-75" transform="translate(40.957057, 313.000000) rotate(-180.000000) translate(-40.957057, -313.000000) "></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

res/img/element-icons/call/expand.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H13C12.45 5 12 4.55 12 4C12 3.45 12.45 3 13 3H19C20.11 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V13C3 12.45 3.45 12 4 12C4.55 12 5 12.45 5 13V18C5 18.55 5.45 19 6 19ZM10 4C10 4.55 9.55 5 9 5H6.41L15.54 14.13C15.93 14.52 15.93 15.15 15.54 15.54C15.15 15.93 14.52 15.93 14.13 15.54L5 6.41V9C5 9.55 4.55 10 4 10C3.45 10 3 9.55 3 9V4C3 3.44772 3.44772 3 4 3H9C9.55 3 10 3.45 10 4Z" fill="#737D8C"/>
-</svg>

res/img/element-icons/call/fullscreen.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 4H4V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14 20L20 20L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 4L9.5 9.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
-<path d="M14.5 14.5L20 20" stroke="white" stroke-width="2" stroke-linecap="round"/>
-</svg>

res/img/element-icons/camera.svg

@@ -1,10 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4896 2.5C9.04778 2.5 7.827 3.52171 7.54879 4.90624C7.50711 5.11367 7.42679 5.31408 7.28726 5.47312L6.6851 6.15949C6.49523 6.37591 6.22129 6.5 5.93338 6.5H2.75C1.64543 6.5 0.75 7.39543 0.75 8.5V19.5C0.75 20.6046 1.64543 21.5 2.75 21.5H22.75C23.8546 21.5 24.75 20.6046 24.75 19.5V8.5C24.75 7.39543 23.8546 6.5 22.75 6.5H19.5666C19.2787 6.5 19.0048 6.37591 18.8149 6.15949L18.2127 5.47312C18.0732 5.31408 17.9929 5.11366 17.9512 4.90623C17.673 3.5217 16.4522 2.5 15.0104 2.5H10.4896ZM16.75 13.5C16.75 15.7091 14.9591 17.5 12.75 17.5C10.5409 17.5 8.75 15.7091 8.75 13.5C8.75 11.2909 10.5409 9.5 12.75 9.5C14.9591 9.5 16.75 11.2909 16.75 13.5ZM3.25 5C2.97386 5 2.75 5.22386 2.75 5.5C2.75 5.77614 2.97386 6 3.25 6H5.25C5.52614 6 5.75 5.77614 5.75 5.5C5.75 5.22386 5.52614 5 5.25 5H3.25Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="24" height="24" fill="white" transform="translate(0.75)"/>
-</clipPath>
-</defs>
-</svg>

res/img/element-icons/clock.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8.625" cy="8.625" r="6.375" stroke="#C1C6CD" stroke-width="2" stroke-linecap="round"/>
-<path d="M8.25 5.625V9.375H11.625" stroke="#C1C6CD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

res/img/element-icons/home.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20.2804 7.90031L13.2804 2.06697C12.5387 1.4489 11.4613 1.4489 10.7196 2.06698L3.71963 7.90031C3.26365 8.28029 3 8.84319 3 9.43675V20.5C3 21.6046 3.89543 22.5 5 22.5H7C8.10457 22.5 9 21.6046 9 20.5V16C9 14.8954 9.89543 14 11 14H13C14.1046 14 15 14.8954 15 16V20.5C15 21.6046 15.8954 22.5 17 22.5H19C20.1046 22.5 21 21.6046 21 20.5V9.43675C21 8.84319 20.7364 8.28029 20.2804 7.90031Z" fill="currentColor"/>
-</svg>

res/img/element-icons/lock.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21.333" height="26.667" fill="none"><path fill="#8e99a4" fill-rule="evenodd" d="M9.778 0a7.111 7.111 0 0 0-7.111 7.111v3.556H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h17.333a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-.666V7.11A7.111 7.111 0 0 0 11.555 0Zm5.333 10.667V7.11a3.556 3.556 0 0 0-3.556-3.555H9.778A3.556 3.556 0 0 0 6.222 7.11v3.556Z" clip-rule="evenodd"/></svg>

res/img/element-icons/security.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C6.29086 1.5 4.5 3.29086 4.5 5.5V7.5C4.5 7.521 4.50016 7.54196 4.50048 7.56288C3.63762 7.78474 3 8.56791 3 9.5V14.5C3 15.6046 3.89543 16.5 5 16.5H13C14.1046 16.5 15 15.6046 15 14.5V9.5C15 8.56791 14.3624 7.78474 13.4995 7.56288C13.4998 7.54196 13.5 7.521 13.5 7.5V5.5C13.5 3.29086 11.7091 1.5 9.5 1.5H8.5ZM11.5 7.5V5.5C11.5 4.39543 10.6046 3.5 9.5 3.5H8.5C7.39543 3.5 6.5 4.39543 6.5 5.5V7.5H11.5Z" fill="black"/>
-</svg>

res/img/element-icons/send-message.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M 18.792 11.145 L 2.356 19.359 C 1.249 19.913 0.097 18.725 0.638 17.642 C 0.638 17.642 2.675 13.528 3.235 12.451 C 3.796 11.373 4.437 11.187 10.393 10.417 C 10.614 10.388 10.794 10.222 10.794 10 C 10.794 9.778 10.614 9.612 10.393 9.583 C 4.437 8.813 3.796 8.627 3.235 7.549 C 2.675 6.472 0.638 2.358 0.638 2.358 C 0.097 1.275 1.249 0.087 2.356 0.64 L 18.792 8.855 C 19.736 9.326 19.736 10.674 18.792 11.145 Z" fill="black"/>
-</svg>

res/img/element-icons/settings.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="black"/>
-</svg>

res/img/feather-customised/dropdown-arrow.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.3" transform="translate(1 1)">
-        <path d="m.5.5 3.85868526 3.25422271"/>
-        <path d="m8.13193273.56042139-3.77324747 3.19380132"/>
-    </g>
-</svg>

res/img/feather-customised/files.svg

@@ -1,11 +0,0 @@
-
-<svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="LifeBuoy" transform="translate(-1433.000000, -90.000000)" stroke="#B8BEC9" stroke-width="1">
-            <g id="file-copy" transform="translate(1434.000000, 91.000000)">
-                <path d="M7.3125,0 L1.625,0 C0.727537282,0 0,0.7163444 0,1.6 L0,14.4 C0,15.2836556 0.727537282,16 1.625,16 L11.375,16 C12.2724627,16 13,15.2836556 13,14.4 L13,5.6 L7.3125,0 Z" id="Path"></path>
-                <polyline id="Path" points="7.3125 0 7.3125 5.6 13 5.6"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>

res/img/feather-customised/image.svg

@@ -1,5 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8C6 6.89543 6.89543 6 8 6H40C41.1046 6 42 6.89543 42 8V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8Z" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 20C18.6569 20 20 18.6569 20 17C20 15.3431 18.6569 14 17 14C15.3431 14 14 15.3431 14 17C14 18.6569 15.3431 20 17 20Z" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M42 30L32 20L10 42" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

res/img/globe.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6.53332 5.3468L6.24528 6.23562C6.23346 6.27208 6.21342 6.30534 6.1867 6.33282L5.90913 6.61831L5.59095 6.94559L5.52111 7.01743C5.4003 7.14169 5.19279 7.10832 5.11702 6.95246L4.97216 6.65447C4.96052 6.63052 4.94513 6.60859 4.92657 6.58949L4.63641 6.29104L4.39185 6.0395C4.34478 5.99108 4.28013 5.96377 4.2126 5.96377H3.83831C3.74261 5.96377 3.6553 5.90914 3.61347 5.82307L3.38884 5.36098C3.37228 5.32692 3.36368 5.28955 3.36368 5.25168V4.47996C3.36368 4.38629 3.31132 4.30048 3.22802 4.25764L2.78114 4.02781C2.74577 4.00962 2.70657 4.00013 2.6668 4.00013H2.19658C2.12905 4.00013 2.0644 3.97282 2.01733 3.9244L1.53085 3.42402C1.48223 3.37402 1.45672 3.30599 1.46046 3.23635L1.49316 2.62739C1.4977 2.54285 1.51357 2.45929 1.54034 2.37897L1.65227 2.0432C1.87098 1.38707 2.38792 0.873558 3.0455 0.659224L3.05974 0.654815C3.66901 0.466234 4.32388 0.487134 4.91987 0.714181C4.94274 0.722892 4.96343 0.736497 4.98049 0.754043L5.42152 1.20768C5.51586 1.30471 5.51586 1.45919 5.42152 1.55622L4.70716 2.291C4.66179 2.33766 4.63641 2.40018 4.63641 2.46527V2.71165C4.63641 2.86997 4.49111 2.98843 4.33603 2.95652L3.34587 2.75283C3.1908 2.72093 3.0455 2.83938 3.0455 2.99771V3.09559C3.0455 3.23366 3.15743 3.34559 3.2955 3.34559H3.75004C3.88812 3.34559 4.00004 3.45752 4.00004 3.59559V3.75013C4.00004 3.8882 4.11197 4.00013 4.25004 4.00013H5.16715C5.23467 4.00013 5.29933 4.02745 5.3464 4.07586L5.56243 4.29807C5.58132 4.3175 5.60324 4.33373 5.62734 4.34612L6.19093 4.63596C6.21503 4.64836 6.23695 4.66459 6.25584 4.68402L6.47475 4.90918C6.52012 4.95584 6.5455 5.01836 6.5455 5.08345V5.26973C6.5455 5.2959 6.54139 5.3219 6.53332 5.3468Z" fill="#A9B2BC" />
-</svg>

res/img/image-view/download.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1L7 12.5858L2.20711 7.79289C1.81658 7.40237 1.18342 7.40237 0.792893 7.79289C0.402369 8.18342 0.402369 8.81658 0.792893 9.20711L7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L15.2071 9.20711C15.5976 8.81658 15.5976 8.18342 15.2071 7.79289C14.8166 7.40237 14.1834 7.40237 13.7929 7.79289L9 12.5858L9 1Z" fill="#8E99A4"/>
-</svg>

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { FilesIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as FileIcon } from "../../../../res/img/feather-customised/files.svg";
 import { _t } from "../../../languageHandler";
 import { getBlobSafeMimeType } from "../../../utils/blobs";
 import BaseDialog from "./BaseDialog";
@@ -86,7 +86,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
                 />
             );
         } else {
-            placeholder = <FileIcon className="mx_UploadConfirmDialog_fileIcon" height={18} width={18} />;
+            placeholder = <FilesIcon className="mx_UploadConfirmDialog_fileIcon" height="18px" width="18px" />;
         }
 
         let uploadAllButton: JSX.Element | undefined;

src/components/views/messages/DownloadActionButton.tsx

@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import classNames from "classnames";
+import { DownloadIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as DownloadIcon } from "../../../../res/img/download.svg";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
 import Spinner from "../elements/Spinner";

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -7,9 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ChangeEvent, useMemo } from "react";
-import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
+import { VideoCallSolidIcon, HomeSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
 import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";
 import { Icon as MembersIcon } from "../../../../../../res/img/element-icons/room/members.svg";
 import { Icon as HashCircleIcon } from "../../../../../../res/img/element-icons/roomlist/hash-circle.svg";
@@ -84,7 +83,7 @@ const SidebarUserSettingsTab: React.FC = () => {
                         disabled={homeEnabled}
                     >
                         <SettingsSubsectionText>
-                            <HomeIcon />
+                            <HomeSolidIcon />
                             {_t("common|home")}
                         </SettingsSubsectionText>
                         <SettingsSubsectionText>
@@ -158,7 +157,7 @@ const SidebarUserSettingsTab: React.FC = () => {
                             className="mx_SidebarUserSettingsTab_checkbox"
                         >
                             <SettingsSubsectionText>
-                                <CameraCircle />
+                                <VideoCallSolidIcon />
                                 {_t("settings|sidebar|metaspaces_video_rooms")}
                             </SettingsSubsectionText>
                             <SettingsSubsectionText>{conferenceSubsectionText}</SettingsSubsectionText>

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -61,7 +61,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                       Home
                     </div>
                     <div
@@ -312,7 +322,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                       Home
                     </div>
                     <div