Replace batch of legacy icons with compound design tokens

res/css/structures/_LeftPanel.pcss

@@ -125,11 +125,11 @@ Please see LICENSE files in the repository root for full details.
                 &::before {
                     content: "";
                     position: absolute;
-                    top: 8px;
-                    left: 8px;
-                    width: 16px;
-                    height: 16px;
-                    mask-image: url("$(res)/img/element-icons/call/dialpad.svg");
+                    top: 6px;
+                    left: 6px;
+                    width: 20px;
+                    height: 20px;
+                    mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;

res/css/views/dialogs/_RoomSettingsDialog.pcss

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

res/css/views/dialogs/_SpaceSettingsDialog.pcss

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

res/css/views/elements/_InviteReason.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
             content: "";
             margin-right: 8px;
             background-color: $secondary-content;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
             display: inline-block;
             width: 18px;
             height: 14px;

res/css/views/messages/_CallEvent.pcss

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
     vertical-align: middle;
     content: "";
     background-color: $secondary-content;
-    mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     mask-size: 16px;
     width: 16px;
     height: 16px;

res/css/views/messages/_LegacyCallEvent.pcss

@@ -54,13 +54,13 @@ Please see LICENSE files in the repository root for full details.
             .mx_LegacyCallEvent_type_icon::before,
             .mx_LegacyCallEvent_content_button_callBack span::before,
             .mx_LegacyCallEvent_content_button_answer span::before {
-                mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
             }
 
             &.mx_LegacyCallEvent_rejected,
             &.mx_LegacyCallEvent_noAnswer {
                 .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("$(res)/img/element-icons/call/hangup.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
                 }
             }
         }
@@ -69,7 +69,7 @@ Please see LICENSE files in the repository root for full details.
             .mx_LegacyCallEvent_type_icon::before,
             .mx_LegacyCallEvent_content_button_callBack span::before,
             .mx_LegacyCallEvent_content_button_answer span::before {
-                mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
             }
 
             &.mx_LegacyCallEvent_rejected,
@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
 
             .mx_LegacyCallEvent_content_button_reject {
                 span::before {
-                    mask-image: url("$(res)/img/element-icons/call/hangup.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
                 }
             }
 

res/css/views/messages/_MJitsiWidgetEvent.pcss

@@ -9,6 +9,6 @@ Please see LICENSE files in the repository root for full details.
 .mx_EventTileBubble.mx_MJitsiWidgetEvent {
     &::before {
         background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 }

res/css/views/rooms/_LiveContentSummary.pcss

@@ -22,11 +22,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_LiveContentSummary_text_video::before {
-            mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
         }
 
         &.mx_LiveContentSummary_text_voice::before {
-            mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
         }
 
         &.mx_LiveContentSummary_text_active {

res/css/views/rooms/_ReplyTile.pcss

@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 
     > a {

res/css/views/rooms/_RoomCallBanner.pcss

@@ -41,6 +41,6 @@ Please see LICENSE files in the repository root for full details.
         width: 16px;
         height: 1.2em; /* to match line height */
         margin-right: 8px;
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 }

res/css/views/rooms/_RoomInfoLine.pcss

@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
     &.mx_RoomInfoLine_video::before {
         width: 16px;
         mask-size: 16px;
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 
     .mx_RoomInfoLine_members {

res/css/views/rooms/_RoomPreviewCard.pcss

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

res/css/views/toasts/_IncomingLegacyCallToast.pcss

@@ -65,14 +65,14 @@ Please see LICENSE files in the repository root for full details.
         &.mx_IncomingLegacyCallToast_content_voice {
             .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
             .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
-                mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
             }
         }
 
         &.mx_IncomingLegacyCallToast_content_video {
             .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
             .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
-                mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
             }
         }
 
@@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details.
                 }
 
                 &.mx_IncomingLegacyCallToast_button_decline span::before {
-                    mask-image: url("$(res)/img/element-icons/call/hangup.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
                     mask-size: 16px;
                     width: 16px;
                     height: 16px;

res/css/views/toasts/_NonUrgentEchoFailureToast.pcss

@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
         mask-size: contain;
         mask-repeat: no-repeat;
         background-color: #fff; /* we know that non-urgent toasts are always styled the same */
-        mask-image: url("$(res)/img/element-icons/cloud-off.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/offline.svg");
         margin-right: 8px;
     }
 

res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss

@@ -155,7 +155,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $alert;
 
             &::before {
-                mask-image: url("$(res)/img/element-icons/call/hangup.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
                 background-color: white; /* Same on both themes */
             }
         }

res/css/views/voip/_DialPad.pcss

@@ -54,6 +54,6 @@ Please see LICENSE files in the repository root for full details.
         mask-size: 20px;
         mask-position: center;
         background-color: #fff; /* on all themes */
-        mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
     }
 }

res/css/views/voip/_LegacyCallViewHeader.pcss

@@ -116,6 +116,6 @@ Please see LICENSE files in the repository root for full details.
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
-        mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
     }
 }

src/components/structures/LeftPanel.tsx

@@ -344,7 +344,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.supportsPstnProtocol) {
             dialPadButton = (
                 <AccessibleButton
-                    className={classNames("mx_LeftPanel_dialPadButton", {})}
+                    className="mx_LeftPanel_dialPadButton"
                     onClick={this.onDialPad}
                     title={_t("left_panel|open_dial_pad")}
                 />

src/components/views/pips/WidgetPip.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type FC, type RefObject, useCallback, useMemo } from "react";
 import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
-import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
+import { ArrowLeftIcon, EndCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import PersistentApp from "../elements/PersistentApp";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -20,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import Toolbar from "../../../accessibility/Toolbar";
 import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
-import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
 import { _t } from "../../../languageHandler";
 import { WidgetType } from "../../../widgets/WidgetType";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
@@ -112,7 +111,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
                             className="mx_WidgetPip_backButton"
                             aria-label={_t("action|back")}
                         >
-                            <BackIcon className="mx_Icon mx_Icon_16" />
+                            <ArrowLeftIcon className="mx_Icon mx_Icon_16" />
                             {roomName}
                         </RovingAccessibleButton>
                     </Toolbar>
@@ -124,7 +123,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
                                 aria-label={_t("action|leave")}
                                 placement="top"
                             >
-                                <HangupIcon className="mx_Icon mx_Icon_24" />
+                                <EndCallIcon className="mx_Icon mx_Icon_24" />
                             </RovingAccessibleButton>
                         </Toolbar>
                     )}

src/vector/jitsi/index.pcss

@@ -99,7 +99,7 @@ html {
         background-color: $dark-fg;
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
         mask-size: $icon-size;
         display: block;
         width: $icon-size;