Replace font icons with svg icons

src/plugins/bookmark-views/templates/item.js

@@ -11,14 +11,16 @@ export default (bm) => {
     return html`
         <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ is_hidden ? 'hidden' : ''}" data-room-jid="${jid}">
             <a class="list-item-link open-room w-100" data-room-jid="${jid}"
-            title="${open_title}"
-            @click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
+                title="${open_title}"
+                @click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
 
-            <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
-            data-room-jid="${jid}"
-            data-bookmark-name="${bm.getDisplayName()}"
-            title="${info_remove_bookmark}"
-            @click=${removeBookmarkViaEvent}></a>
+            <a class="list-item-action remove-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
+                data-room-jid="${jid}"
+                data-bookmark-name="${bm.getDisplayName()}"
+                title="${info_remove_bookmark}"
+                @click=${removeBookmarkViaEvent}>
+            <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
+            </a>
         </div>
     `;
 }

src/plugins/controlbox/styles/_controlbox.scss

@@ -457,6 +457,9 @@
                     .chatbox-btn {
                         color: var(--controlbox-head-color);
                         margin: 0;
+                        converse-icon {
+                            color: var(--controlbox-head-color);
+                        }
                     }
                 }
 

src/plugins/controlbox/templates/controlbox.js

@@ -30,7 +30,9 @@ export default (el) => {
                 ${sticky_controlbox
                     ? ''
                     : html`
-                        <a class="chatbox-btn close-chatbox-button fa fa-times" @click=${(ev) => el.close(ev)}></a>
+                        <a class="chatbox-btn close-chatbox-button" @click=${(ev) => el.close(ev)}>
+                            <converse-icon class="fa fa-times" size="1em"></converse-icon>
+                        </a>
                     `}
             </div>
             <div class="controlbox-panes">

src/plugins/controlbox/templates/loginform.js

@@ -17,9 +17,12 @@ const trust_checkbox = (checked) => {
         <div class="form-group form-check login-trusted">
             <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ?checked=${checked}>
             <label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
-            <i class="fa fa-info-circle" data-toggle="popover"
+
+            <converse-icon class="fa fa-info-circle" data-toggle="popover"
                 data-title="Trusted device?"
-                data-content="${i18n_hint_trusted}"></i>
+                data-content="${i18n_hint_trusted}"
+                size="1.2em"
+                title="${i18n_hint_trusted}"></converse-icon>
         </div>
     `;
 }

src/plugins/muc-views/styles/muc-head.scss

@@ -35,7 +35,6 @@
                 }
                 .chatbox-title__text--bookmarked {
                     margin-left: 0.5em;
-                    color: var(--chatroom-head-color);
                 }
             }
 

src/plugins/muc-views/templates/muc-head.js

@@ -28,7 +28,13 @@ export default (el) => {
             <div class="chatbox-title--row">
                 ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
                 <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ el.model.getDisplayName() }
-                    ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
+                ${ (o.bookmarked) ?
+                    html`<converse-icon
+                            class="fa fa-bookmark chatbox-title__text--bookmarked"
+                            size="1em"
+                            color="var(--chatroom-head-color)"
+                            title="${i18n_bookmarked}">
+                        </converse-icon>` : '' }
                 </div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">

src/plugins/roomslist/templates/roomslist.js

@@ -10,18 +10,24 @@ const bookmark = (o) => {
     const i18n_remove_bookmark = __('Unbookmark this groupchat');
     if (o.bookmarked) {
         return html`
-            <a class="list-item-action fa fa-bookmark remove-bookmark button-on"
+            <a class="list-item-action remove-bookmark button-on"
                data-room-jid="${o.room.get('jid')}"
                data-bookmark-name="${o.room.getDisplayName()}"
                @click=${o.removeBookmark}
-               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
+               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
+
+                <converse-icon class="fa fa-bookmark" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
+            </a>`;
     } else {
         return html`
-            <a class="list-item-action fa fa-bookmark add-bookmark"
+            <a class="list-item-action add-bookmark"
                data-room-jid="${o.room.get('jid')}"
                data-bookmark-name="${o.room.getDisplayName()}"
                @click=${o.addBookmark}
-               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
+               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
+
+                <converse-icon class="fa fa-bookmark" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
+            </a>`;
     }
 }
 
@@ -46,16 +52,22 @@ const room_item = (o) => {
 
             ${ api.settings.get('allow_bookmarks') ? bookmark(o) : '' }
 
-            <a class="list-item-action room-info fa fa-info-circle"
+            <a class="list-item-action room-info"
                 data-room-jid="${o.room.get('jid')}"
                 title="${__('Show more information on this groupchat')}"
-                @click=${o.showRoomDetailsModal}></a>
+                @click=${o.showRoomDetailsModal}>
 
-            <a class="list-item-action fa fa-sign-out-alt close-room"
+                <converse-icon class="fa fa-info-circle" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
+            </a>
+
+            <a class="list-item-action close-room"
                 data-room-jid="${o.room.get('jid')}"
                 data-room-name="${o.room.getDisplayName()}"
                 title="${i18n_leave_room}"
-                @click=${o.closeRoom}></a>
+                @click=${o.closeRoom}>
+
+                <converse-icon class="fa fa-sign-out-alt" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
+            </a>
         </div>`;
 }
 
@@ -70,12 +82,12 @@ export default (o) => {
             <a class="controlbox-heading__btn show-list-muc-modal"
                 @click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
                 title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
-                    <converse-icon class="fa fa-list-ul right" path-prefix="/dist" size="1em"></converse-icon>
+                    <converse-icon class="fa fa-list-ul right" size="1em"></converse-icon>
             </a>
             <a class="controlbox-heading__btn show-add-muc-modal"
                 @click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
                 title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
-                    <converse-icon class="fa fa-plus right" path-prefix="/dist" size="1em"></converse-icon>
+                    <converse-icon class="fa fa-plus right" size="1em"></converse-icon>
             </a>
         </div>
 

src/plugins/rosterview/templates/requesting_contact.js

@@ -4,9 +4,16 @@ export default (o) => html`
    <a class="open-chat w-100" href="#" @click=${o.openChat}>
       <span class="req-contact-name w-100" title="JID: ${o.jid}">${o.display_name}</span>
    </a>
-   <a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check"
+   <a class="accept-xmpp-request list-item-action list-item-action--visible"
       @click=${o.acceptRequest}
-      aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#"></a>
-   <a class="decline-xmpp-request list-item-action list-item-action--visible  fa fa-times"
+      aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#">
+
+      <converse-icon class="fa fa-check" size="1em"></converse-icon>
+   </a>
+
+   <a class="decline-xmpp-request list-item-action list-item-action--visible"
       @click=${o.declineRequest}
-      aria-label="${o.desc_decline}" title="${o.desc_decline}" href="#"></a>`;
+      aria-label="${o.desc_decline}" title="${o.desc_decline}" href="#">
+
+      <converse-icon class="fa fa-times" size="1em"></converse-icon>
+   </a>`;

src/shared/styles/lists.scss

@@ -123,6 +123,9 @@
 
             &:hover {
                 background-color: var(--controlbox-pane-bg-hover-color);
+                .list-item-action {
+                    opacity: 1;
+                }
                 .fa, .far, .fas {
                     opacity: 1;
                 }