Switch from css masks to rendering svg

res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss

@@ -48,18 +48,6 @@ Please see LICENSE files in the repository root for full details.
     margin-bottom: 1em;
 }
 
-.mx_CreateSecretStorageDialog_titleWithIcon::before {
-    content: "";
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    position: relative;
-    top: 5px;
-    background-color: $primary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/key-solid.svg");
-}
-
 .mx_CreateSecretStorageDialog_centeredTitle,
 .mx_CreateSecretStorageDialog_centeredBody {
     text-align: center;

res/css/views/elements/_ImageView.pcss

@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 $button-size: 32px;
-$icon-size: 24px;
-$button-gap: 24px;
+$button-gap: var(--cpd-space-3x);
 
 :root {
     --image-view-panel-height: 68px;
@@ -82,67 +81,39 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_toolbar {
+    --icon-size: 24px;
+
     padding-right: 16px;
     pointer-events: initial;
     display: flex;
     align-items: center;
     flex-grow: 1;
     flex-basis: 0;
     justify-content: flex-end;
-    gap: calc($button-gap - ($button-size - $icon-size));
+    gap: $button-gap;
 }
 
 .mx_ImageView_button {
-    padding: calc(($button-size - $icon-size) / 2);
+    padding: calc(($button-size - var(--icon-size)) / 2);
+    width: var(--icon-size);
+    height: var(--icon-size);
     display: block;
 
-    &::before {
-        content: "";
-        height: $icon-size;
-        width: $icon-size;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
+    svg {
+        height: inherit;
+        width: inherit;
         display: block;
-        background-color: $icon-button-color;
+        color: $icon-button-color;
     }
 }
 
-.mx_ImageView_button_rotateCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-right.svg");
-}
-
-.mx_ImageView_button_rotateCCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-left.svg");
-}
-
-.mx_ImageView_button_zoomOut::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-out.svg");
-}
-
-.mx_ImageView_button_zoomIn::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-in.svg");
-}
-
-.mx_ImageView_button_download::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
-}
-
-.mx_ImageView_button_more::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 28px;
+.mx_ImageView_button_more {
+    --icon-size: 28px;
 }
 
 .mx_ImageView_button_close {
-    padding: calc($button-size - $button-size);
     border-radius: 100%;
     background: #21262c; /* same on all themes */
-    &::before {
-        width: $button-size;
-        height: $button-size;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-size: 24px;
-    }
 }
 
 @media (prefers-reduced-motion) {

res/css/views/messages/_CallEvent.pcss

@@ -46,13 +46,10 @@ Please see LICENSE files in the repository root for full details.
     line-height: 24px; /* in px to match the avatar */
 }
 
-.mx_CallEvent_inactive .mx_CallEvent_title::before {
+.mx_CallEvent_inactive .mx_CallEvent_title svg {
     display: inline-block;
     vertical-align: middle;
-    content: "";
-    background-color: $secondary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-    mask-size: 16px;
+    color: $secondary-content;
     width: 16px;
     height: 16px;
     margin-right: $spacing-8;

res/css/views/rooms/_LegacyRoomListHeader.pcss

@@ -31,26 +31,17 @@ Please see LICENSE files in the repository root for full details.
             background-color: $quinary-content;
         }
 
-        &::before {
-            content: "";
+        svg {
             width: 20px;
             height: 20px;
             top: 3px;
             right: 0;
             position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $tertiary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+            color: $tertiary-content;
         }
 
         &[aria-expanded="true"] {
             background-color: $quinary-content;
-
-            &::before {
-                transform: rotate(180deg);
-            }
         }
     }
 
@@ -66,23 +57,18 @@ Please see LICENSE files in the repository root for full details.
         box-sizing: border-box;
         flex-shrink: 0;
 
-        &::before {
-            content: "";
+        svg {
             width: 16px;
             height: 16px;
             position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+            color: $secondary-content;
         }
 
         &:hover {
             background-color: $tertiary-content;
 
-            &::before {
-                background-color: $background;
+            svg {
+                color: $background;
             }
         }
     }

res/css/views/rooms/_LiveContentSummary.pcss

@@ -10,41 +10,28 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
 
     .mx_LiveContentSummary_text {
-        &::before {
+        svg {
             display: inline-block;
             vertical-align: text-bottom;
-            content: "";
-            background-color: $secondary-content;
-            mask-size: 16px;
+            color: $secondary-content;
             width: 16px;
             height: 16px;
             margin-right: 4px;
         }
 
-        &.mx_LiveContentSummary_text_video::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-        }
-
-        &.mx_LiveContentSummary_text_voice::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
-        }
-
         &.mx_LiveContentSummary_text_active {
             color: $accent;
 
-            &::before {
-                background-color: $accent;
+            svg {
+                color: $accent;
             }
         }
     }
 
-    .mx_LiveContentSummary_participants::before {
+    .mx_LiveContentSummary_participants svg {
         display: inline-block;
-        vertical-align: text-bottom;
-        content: "";
-        background-color: $secondary-content;
-        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-        mask-size: 16px;
+        vertical-align: middle;
+        color: $secondary-content;
         width: 16px;
         height: 16px;
         margin-right: 2px;

res/css/views/rooms/_RoomCallBanner.pcss

@@ -31,16 +31,12 @@ Please see LICENSE files in the repository root for full details.
     font-weight: var(--cpd-font-weight-semibold);
     padding-right: $spacing-8;
 
-    &::before {
+    svg {
         display: inline-block;
         vertical-align: middle;
-        content: "";
-        background-color: $secondary-content;
-        mask-size: 16px;
-        mask-position: center;
+        color: $secondary-content;
         width: 16px;
-        height: 1.2em; /* to match line height */
+        height: 16px;
         margin-right: 8px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 }

res/css/views/rooms/_RoomSublist.pcss

@@ -100,23 +100,19 @@ Please see LICENSE files in the repository root for full details.
             height: 24px;
             border-radius: 8px;
 
-            &::before {
-                content: "";
+            svg {
                 width: 16px;
                 height: 16px;
                 position: absolute;
                 top: 4px;
                 left: 4px;
-                mask-position: center;
-                mask-size: contain;
-                mask-repeat: no-repeat;
-                background: var(--cpd-color-icon-secondary);
+                color: var(--cpd-color-icon-secondary);
             }
         }
 
-        .mx_RoomSublist_auxButton:hover,
-        .mx_RoomSublist_menuButton:hover {
-            background: $panel-actions;
+        .mx_RoomSublist_auxButton:hover svg,
+        .mx_RoomSublist_menuButton:hover svg {
+            color: $panel-actions;
         }
 
         /* Hide the menu button by default */
@@ -126,14 +122,6 @@ Please see LICENSE files in the repository root for full details.
             margin: 0;
         }
 
-        .mx_RoomSublist_auxButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
-        }
-
-        .mx_RoomSublist_menuButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-        }
-
         .mx_RoomSublist_headerText {
             flex: 1;
             max-width: calc(100% - 16px); /* 16px is the badge width */
@@ -151,20 +139,11 @@ Please see LICENSE files in the repository root for full details.
                 height: 14px;
                 margin-right: 6px;
 
-                &::before {
-                    content: "";
+                svg {
                     width: 18px;
                     height: 18px;
                     position: absolute;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: var(--cpd-color-icon-secondary);
-                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-                }
-
-                &.mx_RoomSublist_collapseBtn_collapsed::before {
-                    transform: rotate(-90deg);
+                    color: var(--cpd-color-icon-secondary);
                 }
             }
         }
@@ -320,7 +299,7 @@ Please see LICENSE files in the repository root for full details.
                 background-color: $panel-actions;
                 margin-top: 8px;
 
-                &::before {
+                svg {
                     top: 8px;
                     left: 8px;
                 }
@@ -359,7 +338,7 @@ Please see LICENSE files in the repository root for full details.
                 /* to occlude the sublist title */
                 background-color: $roomlist-bg-color;
 
-                &::before {
+                svg {
                     top: 0;
                     left: 0;
                 }

res/css/views/settings/_ImageSizePanel.pcss

@@ -17,20 +17,10 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ImageSizePanel_size {
-        background-color: $quinary-content;
-        mask-repeat: no-repeat;
-        mask-size: 221px;
-        mask-position: center;
+        display: block;
+        color: $quinary-content;
         width: 221px;
         height: 148px;
         margin-bottom: 14px; /* move radio button away from bottom edge a bit */
-
-        &.mx_ImageSizePanel_sizeDefault {
-            mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
-        }
-
-        &.mx_ImageSizePanel_sizeLarge {
-            mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
-        }
     }
 }

res/css/views/toasts/_IncomingCallToast.pcss

@@ -29,11 +29,6 @@ Please see LICENSE files in the repository root for full details.
             font-weight: var(--cpd-font-weight-semibold);
         }
 
-        .mx_LiveContentSummary_participants::before {
-            width: 15px;
-            height: 15px;
-        }
-
         .mx_IncomingCallToast_buttons {
             display: flex;
             gap: var(--cpd-space-2x);

res/css/views/toasts/_NonUrgentEchoFailureToast.pcss

@@ -7,15 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_NonUrgentEchoFailureToast {
-    .mx_NonUrgentEchoFailureToast_icon {
+    svg {
         display: inline-block;
         width: $font-18px;
         height: $font-18px;
-        mask-position: center;
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        background-color: #fff; /* we know that non-urgent toasts are always styled the same */
-        mask-image: url("@vector-im/compound-design-tokens/icons/offline.svg");
+        color: #fff; /* we know that non-urgent toasts are always styled the same */
         margin-right: 8px;
     }