diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index e403057cd3..fcf6f41c80 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -99,13 +99,13 @@ limitations under the License.
.mx_RoomSubList_chevron {
pointer-events: none;
- background-image: url('$(res)/img/topleft-chevron.svg');
- background-repeat: no-repeat;
+ mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+ mask-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
- height: 10px;
- background-position: center;
+ height: 6px;
margin-left: 2px;
+ background-color: $roomsublist-label-fg-color;
}
.mx_RoomSubList_chevronDown {
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index 43a1e27ee4..e72f1f16da 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -41,4 +41,9 @@ limitations under the License.
.mx_TopLeftMenuButton_chevron {
margin: 0 7px;
+ mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+ mask-repeat: no-repeat;
+ width: 10px;
+ height: 6px;
+ background-color: $roomsublist-label-fg-color;
}
diff --git a/res/img/topleft-chevron.svg b/res/img/topleft-chevron.svg
deleted file mode 100644
index 1cfeaf6352..0000000000
--- a/res/img/topleft-chevron.svg
+++ /dev/null
@@ -1,86 +0,0 @@
-
-
diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
index 601fb2e654..4e3f609c07 100644
--- a/src/components/structures/TopLeftMenuButton.js
+++ b/src/components/structures/TopLeftMenuButton.js
@@ -97,7 +97,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop"
/>
{ nameElement }
-
+
);
}