diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 83e7d46524..85e5c1742f 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -124,13 +124,28 @@ limitations under the License.
padding-right: 4px;
}
-.mx_TagPanel_groupsButton {
+.mx_TagPanel_groupsButton > .mx_AccessibleButton {
+ flex: auto;
margin-bottom: 17px;
margin-top: 18px;
- height: 25px;
- display: none;
-}
+ height: 40px;
+ width: 40px;
+ border-radius: 20px;
+ background-color: $roomheader-addroom-color;
+ position: relative;
+ /* overwrite mx_RoleButton inline-block */
+ display: block !important;
-.mx_TagPanel_groupsButton object {
- pointer-events: none;
+ &:before {
+ background-color: $tagpanel-bg-color;
+ mask: url('../../img/icons-groups-nobg.svg');
+ mask-repeat: no-repeat;
+ mask-position: center 8px;
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
}
diff --git a/res/img/icons-groups-nobg.svg b/res/img/icons-groups-nobg.svg
new file mode 100644
index 0000000000..a3d223b76d
--- /dev/null
+++ b/res/img/icons-groups-nobg.svg
@@ -0,0 +1,60 @@
+
+
\ No newline at end of file
diff --git a/src/components/views/elements/GroupsButton.js b/src/components/views/elements/GroupsButton.js
index 75dfe4e9ad..854670cb3f 100644
--- a/src/components/views/elements/GroupsButton.js
+++ b/src/components/views/elements/GroupsButton.js
@@ -24,7 +24,6 @@ const GroupsButton = function(props) {
return (