Switch to rendering svg icons rather than css masking

res/css/_components.pcss

@@ -280,7 +280,6 @@
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
 @import "./views/rooms/_CallGuestLinkButton.pcss";
-@import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_E2EIconView.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";

res/css/structures/_LeftPanel.pcss

@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
                 margin-top: 12px;
             }
 
-            .mx_LeftPanel_dialPadButton {
-                width: 32px;
-                height: 32px;
+            .mx_LeftPanel_dialPadButton,
+            .mx_LeftPanel_exploreButton {
+                width: 20px;
+                height: 20px;
+                padding: var(--cpd-space-1-5x);
                 border-radius: 8px;
                 background-color: $panel-actions;
-                position: relative;
                 margin-left: 8px;
 
-                &::before {
-                    content: "";
-                    position: absolute;
-                    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;
-                    background-color: $secondary-content;
-                }
-            }
-
-            .mx_LeftPanel_exploreButton,
-            .mx_LeftPanel_recentsButton {
-                width: 32px;
-                height: 32px;
-                border-radius: 8px;
-                background-color: $panel-actions;
-                position: relative;
-                margin-left: 8px;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 8px;
-                    left: 8px;
-                    width: 16px;
-                    height: 16px;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: $secondary-content;
+                svg {
+                    width: inherit;
+                    height: inherit;
+                    display: block;
+                    color: $secondary-content;
                 }
 
                 &:hover {
                     background-color: $tertiary-content;
 
-                    &::before {
-                        background-color: $background;
+                    svg {
+                        color: $background;
                     }
                 }
             }
-
-            .mx_LeftPanel_exploreButton::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
-            }
-
-            .mx_LeftPanel_recentsButton::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
-            }
         }
 
         .mx_LegacyRoomListHeader:first-child {
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
                     background-color: transparent;
                 }
 
-                .mx_LeftPanel_exploreButton,
-                .mx_LeftPanel_recentsButton {
+                .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;
                 }

res/css/structures/_RoomStatusBar.pcss

@@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details.
             position: relative;
             user-select: none;
 
-            &:nth-child(2) {
+            & + .mx_AccessibleButton {
                 border-left: 1px solid $resend-button-divider-color;
             }
 
-            &::before {
-                content: "";
-                position: absolute;
+            svg {
                 left: 10px; /* inset for regular button padding */
-                background-color: $muted-fg-color;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
+
                 width: 18px;
                 height: 18px;
-                top: 50%; /* text sizes are dynamic */
-                transform: translateY(-50%);
-            }
-
-            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                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("@vector-im/compound-design-tokens/icons/restart.svg");
-                }
+                vertical-align: middle;
+                color: $muted-fg-color;
             }
         }
 

res/css/structures/_SearchBox.pcss

@@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_SearchBox_closeButton {
         cursor: pointer;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 16px;
-        width: 16px;
         height: 16px;
+        width: 16px;
         padding: 9px;
-        background-color: var(--cpd-color-icon-secondary);
+
+        svg {
+            height: inherit;
+            width: inherit;
+            color: var(--cpd-color-icon-secondary);
+        }
     }
 }

res/css/views/dialogs/_InviteDialog.pcss

@@ -223,14 +223,6 @@ Please see LICENSE files in the repository root for full details.
     margin-inline-start: auto;
 }
 
-.mx_InviteDialog_userDirectoryIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
-}
-
-.mx_InviteDialog_dialPadIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
-}
-
 .mx_InviteDialog_tile {
     cursor: pointer;
     display: grid;

res/css/views/dialogs/_JoinRuleDropdown.pcss

@@ -18,19 +18,14 @@ Please see LICENSE files in the repository root for full details.
         min-height: 32px;
 
         > div {
-            padding-left: 30px;
-            position: relative;
+            padding-left: var(--cpd-space-1-5x);
 
-            &::before {
-                content: "";
-                position: absolute;
-                height: 16px;
+            svg {
                 width: 16px;
-                left: 6px;
-                top: 8px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: $secondary-content;
+                height: 16px;
+                color: $secondary-content;
+                vertical-align: -2px;
+                margin-right: var(--cpd-space-1-5x);
             }
 
             &.mx_JoinRuleDropdown_knock::before {
@@ -39,22 +34,6 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_JoinRuleDropdown_invite::before {
-        box-sizing: border-box;
-        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-        mask-size: contain;
-        padding: 1px;
-    }
-
-    .mx_JoinRuleDropdown_public::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
-    }
-
-    .mx_JoinRuleDropdown_restricted::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-        mask-size: contain;
-    }
-
     .mx_JoinRuleDropdown_icon {
         color: $secondary-content;
         position: absolute;

res/css/views/dialogs/_LeaveSpaceDialog.pcss

@@ -25,28 +25,21 @@ Please see LICENSE files in the repository root for full details.
                 overflow-y: auto;
 
                 .mx_LeaveSpaceDialog_section_warning {
-                    position: relative;
                     border-radius: 8px;
                     margin: 12px 0 0;
-                    padding: 12px 8px 12px 42px;
+                    padding: 12px 8px;
                     background-color: $header-panel-bg-color;
 
                     font-size: $font-12px;
                     line-height: $font-15px;
                     color: $secondary-content;
 
-                    &::before {
-                        content: "";
-                        position: absolute;
-                        left: 10px;
-                        top: calc(50% - 8px); /* vertical centering */
+                    svg {
                         height: 16px;
                         width: 16px;
-                        background-color: $secondary-content;
-                        mask-repeat: no-repeat;
-                        mask-size: contain;
-                        mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
-                        mask-position: center;
+                        color: $secondary-content;
+                        vertical-align: middle;
+                        margin: 0 var(--cpd-space-1x);
                     }
                 }
 

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -87,25 +87,19 @@ Please see LICENSE files in the repository root for full details.
         position: relative;
         border-radius: 8px;
         margin: 12px 0;
-        padding: 8px 8px 8px 42px;
+        padding: 8px;
         background-color: $header-panel-bg-color;
 
         font-size: $font-12px;
         line-height: $font-15px;
         color: $secondary-content;
 
-        &::before {
-            content: "";
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); /* vertical centering */
+        svg {
             height: 16px;
             width: 16px;
-            background-color: $secondary-content;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
-            mask-position: center;
+            color: $secondary-content;
+            vertical-align: middle;
+            margin: 0 var(--cpd-space-1x);
         }
     }
 

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -5,46 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-/* ICONS */
-/* ========================================================== */
-
-.mx_RoomSettingsDialog_settingsIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-}
-
-.mx_RoomSettingsDialog_voiceIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
-}
-
-.mx_RoomSettingsDialog_securityIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-}
-
-.mx_RoomSettingsDialog_rolesIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/admin.svg");
-}
-
-.mx_RoomSettingsDialog_notificationsIcon::before {
-    mask-image: url("$(res)/img/element-icons/notifications.svg");
-}
-
-.mx_RoomSettingsDialog_bridgesIcon::before {
-    /* This icon is pants, please improve :) */
-    mask-image: url("$(res)/img/feather-customised/bridge.svg");
-}
-
-.mx_RoomSettingsDialog_pollsIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
-}
-
-.mx_RoomSettingsDialog_warningIcon::before {
-    mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
-}
-
-.mx_RoomSettingsDialog_peopleIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-}
-
 .mx_RoomSettingsDialog .mx_Dialog_title {
     -ms-text-overflow: ellipsis;
     text-overflow: ellipsis;

res/css/views/dialogs/_SpacePreferencesDialog.pcss

@@ -26,7 +26,3 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 }
-
-.mx_SpacePreferencesDialog_appearanceIcon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
-}

res/css/views/dialogs/_SpaceSettingsDialog.pcss

@@ -71,14 +71,4 @@ Please see LICENSE files in the repository root for full details.
             }
         }
     }
-
-    .mx_TabbedView_tabLabel {
-        .mx_SpaceSettingsDialog_generalIcon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-        }
-
-        .mx_SpaceSettingsDialog_visibilityIcon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
-        }
-    }
 }

res/css/views/elements/_ExternalLink.pcss

@@ -12,10 +12,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ExternalLink_icon {
     display: inline-block;
-    mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
-    background-color: currentColor;
-    mask-repeat: no-repeat;
-    mask-size: contain;
     width: $font-11px;
     height: $font-11px;
     margin-left: 0.3rem;