Show encrypted lock icon in message as svg

src/shared/chat/templates/message.js

@@ -34,7 +34,7 @@ export default (el, o) => {
                         <span class="chat-msg__author"><a class="show-msg-author-modal" @click=${el.showUserModal}>${o.username}</a></span>
                         ${ o.hats.map(h => html`<span class="badge badge-secondary">${h.title}</span>`) }
                         <time timestamp="${el.model.get('edited') || el.model.get('time')}" class="chat-msg__time">${o.pretty_time}</time>
-                        ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
+                        ${ o.is_encrypted ? html`<converse-icon class="fa fa-lock" size="1.1em"></converse-icon>` : '' }
                     </span>` : '' }
 
                 <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">

src/shared/styles/_core.scss

@@ -223,6 +223,7 @@
         }
 
         &.fa, &.far, &.fas {
+            fill: var(--subdued-color);
             color: var(--subdued-color);
             &:hover {
                 color: var(--gray-color);

src/shared/styles/messages.scss

@@ -256,6 +256,11 @@
                     padding-right: 0.25em;
                     color: var(--text-color-lighten-15-percent);
                 }
+                .fa-lock {
+                    svg {
+                        padding-bottom: 2px;
+                    }
+                }
             }
             &.chat-msg--action {
                 .chat-msg__message {