Show padlock in room headers for invite-only rooms

Fixes #11832

res/css/views/rooms/_RoomHeader.scss

@@ -263,3 +263,24 @@ limitations under the License.
 .mx_RoomHeader_pinsIndicatorUnread {
     background-color: $pinned-unread-color;
 }
+
+.mx_RoomHeader_PrivateIcon.mx_RoomHeader_isPrivate {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    display: block !important;
+
+    &::before {
+        background-color: $roomtile-name-color;
+        mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}

src/components/views/rooms/RoomHeader.js

@@ -159,6 +159,10 @@ module.exports = createReactClass({
             <E2EIcon status={this.props.e2eStatus} /> :
             undefined;
 
+        const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
+        const joinRule = joinRules && joinRules.getContent().join_rule;
+        const joinRuleClass = "mx_RoomHeader_PrivateIcon" + (joinRule === "invite" ? " mx_RoomHeader_isPrivate" : "");
+
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
         }
@@ -303,6 +307,7 @@ module.exports = createReactClass({
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
                     { e2eIcon }
+                    <div className={joinRuleClass}/>
                     { name }
                     { topicElement }
                     { cancelButton }