Deduplicate more icons using Compound Design Tokens

res/css/components/views/context_menus/_KebabContextMenu.pcss

@@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_KebabContextMenu_icon {
     width: 24px;
+    height: 24px;
     color: $icon-button-color;
 }

res/css/components/views/dialogs/polls/_PollDetailHeader.pcss

@@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollDetailHeader_icon {
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     margin-right: $spacing-8;
     vertical-align: middle;
 }

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

@@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ShareDialogButtons_button-icon {
-    height: 10px;
-    margin-top: 3px;
+    width: 20px;
+    height: 20px;
+    margin: 2px;
 }

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/_SpaceHierarchy.pcss

@@ -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

@@ -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;
             }
         }

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

@@ -49,7 +49,7 @@ 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 {
@@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCopy::before {
-        height: 12px;
-        left: 2px;
+        height: 16px;
         mask-image: url($copy-button-url);
         position: relative;
-        width: 12px;
-        top: 3px;
+        width: 16px;
     }
 
     .mx_MessageContextMenu_iconEdit::before {

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -197,7 +197,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/views/dialogs/_SpotlightDialog.pcss

@@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
                     content: "";
                     mask-repeat: no-repeat;
                     mask-position: center;
-                    mask-size: contain;
-                    width: 8px;
-                    height: 8px;
+                    mask-size: 14px;
+                    width: inherit;
+                    height: inherit;
                     position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                    mask-image: url("$(res)/img/cancel-small.svg");
+                    left: 0;
+                    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 }
             }
         }
@@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
                 }
 
                 .mx_SpotlightDialog_option--menu::before {
-                    mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                 }
 
                 &:hover,

res/css/views/directory/_NetworkDropdown.pcss

@@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-size: contain;
-        width: 8px;
-        height: 8px;
+        mask-size: 14px;
+        width: inherit;
+        height: inherit;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        mask-image: url("$(res)/img/cancel-small.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     }
 }
 

res/css/views/elements/_FacePile.pcss

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

res/css/views/elements/_TagComposer.pcss

@@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
         position: relative;
 
         svg {
-            width: 0.5em;
-            vertical-align: middle;
+            width: 16px;
+            height: 16px;
         }
     }
 }

res/css/views/elements/_UseCaseSelectionButton.pcss

@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
             width: 12px;
             height: 12px;
 
-            mask-image: url("$(res)/img/element-icons/check-white.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
         }
     }
 

res/css/views/right_panel/_ExtensionsCard.pcss

@@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
         .mx_ExtensionsCard_app_options {
             right: 32px; /* 24 + 8 */
             &::before {
-                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
             }
         }
 

res/css/views/rooms/_LegacyRoomHeader.pcss

@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_LegacyRoomHeader_closeButton {
     &::before {
-        mask-image: url("$(res)/img/cancel.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
         mask-size: 20px;
         mask-position: center;
     }

res/css/views/rooms/_LinkPreviewGroup.pcss

@@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
         width: 18px;
         height: 18px;
 
-        img {
+        svg {
             flex: 0 0 40px;
             visibility: hidden;
         }
     }
 
     &:hover .mx_LinkPreviewGroup_hide img,
-    .mx_LinkPreviewGroup_hide:focus-visible:focus img {
+    .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
         visibility: visible;
     }
 

res/css/views/rooms/_ReplyPreview.pcss

@@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
 
             .mx_ReplyPreview_header_cancel {
                 background-color: $primary-content;
-                mask: url("$(res)/img/cancel.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: 18px;
-                width: 18px;
-                height: 18px;
-                min-width: 18px;
-                min-height: 18px;
+                mask-size: contain;
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                min-height: 20px;
             }
         }
     }

res/css/views/rooms/_RoomSublist.pcss

@@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_RoomSublist_menuButton::before {
-            mask-image: url("$(res)/img/element-icons/context-menu.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
         }
 
         .mx_RoomSublist_headerText {

res/css/views/rooms/_RoomTile.pcss

@@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_menuButton::before {
-        mask-image: url("$(res)/img/element-icons/context-menu.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
     }
 
     &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

res/css/views/rooms/_TopUnreadMessagesBar.pcss

@@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
     position: absolute;
     width: 18px;
     height: 18px;
-    mask-image: url("$(res)/img/cancel.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     mask-repeat: no-repeat;
-    mask-size: 10px;
-    mask-position: 4px 4px;
+    mask-size: 16px;
+    mask-position: center;
     background: var(--cpd-color-icon-tertiary);
 }

res/css/views/toasts/_IncomingCallToast.pcss

@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
         &::before {
             content: "";
 
-            mask-image: url("$(res)/img/cancel.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
 
             height: inherit;
             width: inherit;

res/css/views/user-onboarding/_UserOnboardingButton.pcss

@@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 7px;
-                height: 7px;
+                mask-size: 12px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
+                left: -1px;
+                top: -1px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
             }
         }
     }

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 16px;
-                height: 16px;
+                mask-size: 24px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: calc(50% - 8px);
-                top: calc(50% - 8px);
-                mask-image: url("$(res)/img/element-icons/check-white.svg");
+                left: 0;
+                top: 0;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
 
                 animation-duration: 300ms;
                 animation-fill-mode: both;