diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index cb0a541e23..db41f6bc28 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -40,20 +40,6 @@ limitations under the License.
flex: 1 1 0px;
}
-.mx_MemberList form,
-.mx_GroupMemberList form,
-.mx_GroupRoomList form {
- display: flex;
- justify-content: flex-end;
- align-items: center;
-}
-
-.mx_MemberList form > *,
-.mx_GroupMemberList form > *,
-.mx_GroupRoomList form > * {
- margin: 9px;
-}
-
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
@@ -75,28 +61,24 @@ limitations under the License.
padding: 10px;
}
-.mx_MemberList_inviteIcon object {
- pointer-events: none;
-}
-
-.mx_MemberList_inviteIcon {
- position: absolute;
- top: 10px;
- left: 10px;
-}
-
.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
- color: $button-fg-color;
border-radius: 4px;
padding: 8px;
- font-weight: 600;
-}
+ margin: 9px;
+ display: flex;
-/* move text to left */
-.mx_MemberList_invite > :last-child {
- margin-left: 25px;
+ span {
+ margin: 0 auto;
+ background-image: url('../../img/icon-invite-people.svg');
+ background-repeat: no-repeat;
+ background-position: center left;
+ padding-left: 25px;
+
+ font-weight: 600;
+ color: $button-fg-color;
+ }
}
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 69e5dbb76c..58be22c90f 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -429,10 +429,7 @@ module.exports = React.createClass({
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
inviteButton =