Improve icon rendering accessibility

res/css/_common.pcss

@@ -496,29 +496,20 @@ legend {
 }
 
 @define-mixin customisedCancelButton {
-    cursor: pointer;
-    position: relative;
-    width: 28px;
-    height: 28px;
+    width: 20px;
+    height: 20px;
+    padding: var(--cpd-space-1x);
     border-radius: 14px;
     background-color: var(--cpd-color-bg-subtle-secondary);
 
     &:hover {
         background-color: var(--cpd-color-bg-subtle-primary);
     }
 
-    &::before {
-        content: "";
-        width: 28px;
-        height: 28px;
-        left: 0;
-        top: 0;
-        position: absolute;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 20px;
-        background-color: var(--cpd-color-icon-secondary);
+    svg {
+        width: inherit;
+        height: inherit;
+        color: var(--cpd-color-icon-secondary);
     }
 }
 
@@ -858,18 +849,16 @@ legend {
     line-height: $font-24px;
     margin-right: 0;
 
-    span {
-        display: flex;
-        align-items: center;
+    display: flex;
+    align-items: center;
 
-        &::before {
-            content: "";
-            display: inline-block;
-            background-color: $button-fg-color;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            margin-right: 8px;
-        }
+    svg {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        color: $button-fg-color;
+        margin-right: 8px;
+        vertical-align: middle;
     }
 }
 
@@ -882,15 +871,11 @@ legend {
 }
 
 @define-mixin ThreadSummaryIcon {
-    content: "";
     display: inline-block;
-    mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
     height: 18px;
-    min-width: 18px;
-    background-color: $icon-button-color !important;
+    width: 18px;
+    flex-shrink: 0;
+    color: $icon-button-color;
 }
 
 @define-mixin composerButtonHighLight {

res/css/components/views/polls/_PollOption.pcss

@@ -59,28 +59,19 @@ Please see LICENSE files in the repository root for full details.
     /* override checked radio button styling to show checkmark instead */
     .mx_StyledRadioButton_checked {
         input[type="radio"]:checked + div {
-            position: relative;
-            border-width: 2px;
             border-color: var(--cpd-color-icon-primary);
             background-color: var(--cpd-color-icon-primary);
 
-            &::before {
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-size: 12px 12px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: var(--cpd-color-icon-on-solid-primary);
-                width: 12px;
-                height: 12px;
-            }
-
             div {
-                visibility: hidden;
+                background: none;
+
+                svg {
+                    color: var(--cpd-color-icon-on-solid-primary);
+                    width: 12px;
+                    height: 12px;
+                    margin: -2px;
+                    display: block;
+                }
             }
         }
     }

res/css/structures/_TabbedView.pcss

@@ -37,28 +37,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_TabbedView_tabLabel:hover,
     .mx_TabbedView_tabLabel_active {
         color: $tab-label-active-fg-color;
-
-        .mx_TabbedView_maskedIcon::before {
-            background-color: var(--cpd-color-icon-primary);
-        }
     }
 
     .mx_TabbedView_tabLabel_active {
         background-color: var(--cpd-color-bg-subtle-secondary);
     }
-
-    .mx_TabbedView_maskedIcon {
-        width: 20px;
-        height: 20px;
-        margin-right: var(--cpd-space-3x);
-    }
-
-    .mx_TabbedView_maskedIcon::before {
-        mask-size: 20px;
-        width: 20px;
-        height: 20px;
-        transition: background-color 0.1s;
-    }
 }
 
 .mx_TabbedView_tabsOnTop {
@@ -89,23 +72,6 @@ Please see LICENSE files in the repository root for full details.
             color: $accent;
         }
     }
-
-    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-        background-color: $accent;
-    }
-
-    .mx_TabbedView_maskedIcon {
-        width: 22px;
-        height: 22px;
-        margin-left: 0px;
-        margin-right: 8px;
-    }
-
-    .mx_TabbedView_maskedIcon::before {
-        mask-size: 22px;
-        width: inherit;
-        height: inherit;
-    }
 }
 
 .mx_TabbedView_tabLabels {
@@ -136,18 +102,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_TabbedView_maskedIcon {
-    display: inline-block;
-}
-
-.mx_TabbedView_maskedIcon::before {
-    display: inline-block;
-    background-color: var(--cpd-color-icon-secondary);
-    mask-repeat: no-repeat;
-    mask-position: center;
-    content: "";
-}
-
 .mx_TabbedView_tabLabel_text {
     vertical-align: middle;
 }
@@ -173,10 +127,6 @@ Please see LICENSE files in the repository root for full details.
         .mx_TabbedView_tabPanel {
             margin-left: 72px; /* 40px sidebar + 32px padding */
         }
-        .mx_TabbedView_maskedIcon {
-            margin-right: auto;
-            margin-left: auto;
-        }
         .mx_TabbedView_tabLabels {
             width: auto;
         }

res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss

@@ -42,18 +42,13 @@ Please see LICENSE files in the repository root for full details.
         vertical-align: middle;
         position: relative;
 
-        &::before {
-            content: "";
+        svg {
             position: absolute;
             width: 26px;
             height: 26px;
             left: 0;
             top: 0;
-            background-color: #0dbd8b;
-            mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: contain;
+            color: #0dbd8b;
         }
     }
 }

res/css/views/messages/_LegacyCallEvent.pcss

@@ -37,50 +37,6 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
-        &.mx_LegacyCallEvent_voice {
-            .mx_LegacyCallEvent_type_icon::before,
-            .mx_LegacyCallEvent_content_button_callBack span::before,
-            .mx_LegacyCallEvent_content_button_answer span::before {
-                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("@vector-im/compound-design-tokens/icons/end-call.svg");
-                }
-            }
-        }
-
-        &.mx_LegacyCallEvent_video {
-            .mx_LegacyCallEvent_type_icon::before,
-            .mx_LegacyCallEvent_content_button_callBack span::before,
-            .mx_LegacyCallEvent_content_button_answer span::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-            }
-
-            &.mx_LegacyCallEvent_rejected,
-            &.mx_LegacyCallEvent_noAnswer {
-                .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
-                }
-            }
-        }
-
-        &.mx_LegacyCallEvent_missed {
-            &.mx_LegacyCallEvent_voice {
-                .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-missed-solid.svg");
-                }
-            }
-
-            &.mx_LegacyCallEvent_video {
-                .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
-                }
-            }
-        }
-
         .mx_LegacyCallEvent_info {
             display: flex;
             flex-direction: row;
@@ -106,26 +62,8 @@ Please see LICENSE files in the repository root for full details.
                 }
 
                 .mx_LegacyCallEvent_type {
-                    display: flex;
-                    align-items: center;
                     font-weight: 400;
                     color: $secondary-content;
-
-                    .mx_LegacyCallEvent_type_icon {
-                        height: 13px;
-                        width: 13px;
-                        margin-right: 5px;
-
-                        &::before {
-                            content: "";
-                            position: absolute;
-                            height: 13px;
-                            width: 13px;
-                            background-color: $secondary-content;
-                            mask-repeat: no-repeat;
-                            mask-size: contain;
-                        }
-                    }
                 }
             }
         }
@@ -145,19 +83,6 @@ Please see LICENSE files in the repository root for full details.
                 @mixin LegacyCallButton;
                 padding: 0 $spacing-12;
                 font-size: inherit;
-
-                span::before {
-                    mask-size: 16px;
-                    width: 16px;
-                    height: 16px;
-                    flex-shrink: 0;
-                }
-            }
-
-            .mx_LegacyCallEvent_content_button_reject {
-                span::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
-                }
             }
 
             .mx_LegacyCallEvent_content_tooltip {
@@ -189,6 +114,21 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+.mx_LegacyCallEvent_type_icon {
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+    display: inline-block;
+    vertical-align: -2px;
+
+    svg {
+        position: absolute;
+        height: inherit;
+        width: inherit;
+        color: $tertiary-content;
+    }
+}
+
 .mx_EventTile[data-layout="bubble"] {
     .mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
         .mx_LegacyCallEvent {

res/css/views/right_panel/_VerificationPanel.pcss

@@ -39,14 +39,6 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_EncryptionPanel_cancel {
-        @mixin customisedCancelButton;
-        position: absolute;
-        z-index: 100;
-        top: 14px;
-        right: 14px;
-    }
-
     .mx_VerificationPanel_qrCode {
         padding: 4px 4px 0 4px;
         background: white;

res/css/views/rooms/_EventTile.pcss

@@ -1065,7 +1065,7 @@ $left-gutter: 64px;
         position: relative;
         font: var(--cpd-font-body-sm-regular);
 
-        &::before {
+        > svg {
             @mixin ThreadSummaryIcon;
         }
 

res/css/views/rooms/_ThreadSummary.pcss

@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
     display: inline-block;
     margin-bottom: $spacing-8;
 
-    &::before {
+    > svg {
         @mixin ThreadSummaryIcon;
         vertical-align: middle;
         margin-inline-end: $spacing-8;