Allow theming right panel header buttons

res/css/structures/_RightPanel.scss

@@ -25,9 +25,7 @@ limitations under the License.
 
 .mx_RightPanel_header {
     order: 1;
-
     border-bottom: 1px solid $primary-hairline-color;
-
     flex: 0 0 52px;
 }
 
@@ -45,16 +43,35 @@ limitations under the License.
     cursor: pointer;
     flex: 0 0 auto;
     vertical-align: top;
-    margin-top: 4px;
-    padding-left: 5px;
-    padding-right: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
     text-align: center;
-    position: relative;
     border-bottom: 2px solid transparent;
+    height: 20px;
+    width: 20px;
+    background-color: $rightpanel-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RightPanel_headerButton object {
-    pointer-events: none;
+.mx_RightPanel_membersButton {
+    mask-image: url('$(res)/img/feather-icons/user.svg');
+}
+
+.mx_RightPanel_filesButton {
+    mask-image: url('$(res)/img/feather-icons/files.svg');
+}
+
+.mx_RightPanel_notifsButton {
+    mask-image: url('$(res)/img/feather-icons/notifications.svg');
+}
+
+.mx_RightPanel_groupMembersButton {
+    mask-image: url('$(res)/img/icons-people.svg');
+}
+
+.mx_RightPanel_roomsButton {
+    mask-image: url('$(res)/img/icons-room-nobg.svg');
 }
 
 .mx_RightPanel_headerButton_highlight {

res/themes/dark/css/_dark.scss

@@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color;
 $roomheader-addroom-color: $header-panel-text-primary-color;
 $tagpanel-button-color: $header-panel-text-primary-color;
 $roomheader-button-color: $header-panel-text-primary-color;
+$rightpanel-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
 $eventtile-meta-color: $roomtopic-color;
 

res/themes/dharma/css/_dharma.scss

@@ -147,6 +147,7 @@ $roomheader-color: #45474a;
 $roomheader-addroom-color: #91A1C0;
 $tagpanel-button-color: #91A1C0;
 $roomheader-button-color: #91A1C0;
+$rightpanel-button-color: #91A1C0;
 $roomtopic-color: #9fa9ba;
 $eventtile-meta-color: $roomtopic-color;