Fix SVG mask-image usage in a bunch of places for correct outlining

res/css/views/rooms/_RoomHeader.scss

@@ -192,33 +192,41 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
+    position: relative;
     margin-left: 10px;
     cursor: pointer;
     height: 20px;
     width: 20px;
-    background-color: $roomheader-button-color;
-    mask-repeat: no-repeat;
-    mask-size: contain;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        background-color: $roomheader-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
 }
 
-.mx_RoomHeader_settingsButton {
+.mx_RoomHeader_settingsButton::before {
     mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
-.mx_RoomHeader_forgetButton {
+.mx_RoomHeader_forgetButton::before {
     mask-image: url('$(res)/img/leave.svg');
     width: 26px;
 }
 
-.mx_RoomHeader_searchButton {
+.mx_RoomHeader_searchButton::before {
     mask-image: url('$(res)/img/feather-customised/search.svg');
 }
 
-.mx_RoomHeader_shareButton {
+.mx_RoomHeader_shareButton::before {
     mask-image: url('$(res)/img/feather-customised/share.svg');
 }
 
-.mx_RoomHeader_manageIntegsButton {
+.mx_RoomHeader_manageIntegsButton::before {
     mask-image: url('$(res)/img/feather-customised/grid.svg');
 }
 
@@ -234,8 +242,7 @@ limitations under the License.
     margin-top: 18px;
 }
 
-.mx_RoomHeader_pinnedButton {
-    position: relative;
+.mx_RoomHeader_pinnedButton::before {
     mask-image: url('$(res)/img/icons-pin.svg');
 }