Use the assets_path setting for the icons sprite

package-lock.json

@@ -3234,7 +3234,8 @@
 			"dependencies": {
 				"filesize": {
 					"version": "6.1.0",
-					"resolved": false
+					"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
+					"integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg=="
 				},
 				"fs-extra": {
 					"version": "8.1.0",
@@ -3268,7 +3269,8 @@
 				},
 				"jed": {
 					"version": "1.1.1",
-					"resolved": false
+					"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
+					"integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
 				},
 				"jsonfile": {
 					"version": "5.0.0",
@@ -3289,7 +3291,8 @@
 				},
 				"localforage": {
 					"version": "1.7.3",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
+					"integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
 					"requires": {
 						"lie": "3.1.1"
 					}
@@ -3301,13 +3304,14 @@
 				},
 				"pluggable.js": {
 					"version": "2.0.1",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/pluggable.js/-/pluggable.js-2.0.1.tgz",
+					"integrity": "sha512-SBt6v6Tbp20Jf8hU0cpcc/+HBHGMY8/Q+yA6Ih0tBQE8tfdZ6U4PRG0iNvUUjLx/hVyOP53n0UfGBymlfaaXCg==",
 					"requires": {
 						"lodash": "^4.17.11"
 					}
 				},
 				"skeletor.js": {
-					"version": "0.0.1",
+					"version": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
 					"from": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
 					"requires": {
 						"lodash": "^4.17.14"
@@ -3315,11 +3319,13 @@
 				},
 				"strophe.js": {
 					"version": "1.3.4",
-					"resolved": false
+					"resolved": "https://registry.npmjs.org/strophe.js/-/strophe.js-1.3.4.tgz",
+					"integrity": "sha512-jSLDG8jolhAwGOSgiJ7DTMSYK3wVoEJHKtpVRyEacQZ6CWA6z2WRPJpcFMjsIweq5aP9/XIvKUQqHBu/ZhvESA=="
 				},
 				"twemoji": {
 					"version": "12.1.5",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-12.1.5.tgz",
+					"integrity": "sha512-B0PBVy5xomwb1M/WZxf/IqPZfnoIYy1skXnlHjMwLwTNfZ9ljh8VgWQktAPcJXu8080WoEh6YwQGPVhDVqvrVQ==",
 					"requires": {
 						"fs-extra": "^8.0.1",
 						"jsonfile": "^5.0.0",

src/components/help_messages.js

 import 'fa-icons';
 import xss from "xss/dist/xss";
 import { CustomElement } from './element.js';
-import { _converse, converse } from "@converse/headless/converse-core";
+import { _converse, api } from "@converse/headless/converse-core";
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
-const u = converse.env.utils;
-
 
 class ChatHelp extends CustomElement {
 
@@ -23,7 +21,7 @@ class ChatHelp extends CustomElement {
         const icon_color = this.chat_type === _converse.CHATROOMS_TYPE ? 'var(--chatroom-head-bg-color)' : 'var(--chat-head-color)';
         const isodate = (new Date()).toISOString();
         return [
-            html`<fa-icon class="fas fa-times close-chat-help" @click=${this.close} path-prefix="dist" color="${icon_color}" size="1em"></fa-icon>`,
+            html`<fa-icon class="fas fa-times close-chat-help" @click=${this.close} path-prefix="${api.settings.get("assets_path")}" color="${icon_color}" size="1em"></fa-icon>`,
             ...this.messages.map(m => this.renderHelpMessage({
                 isodate,
                 'markup': xss.filterXSS(m, {'whiteList': {'strong': []}})

src/components/message-actions.js

 import { CustomElement } from './element.js';
 import { __ } from '@converse/headless/i18n';
+import { api } from "@converse/headless/converse-core";
 import { html } from 'lit-element';
 import { until } from 'lit-html/directives/until.js';
 
@@ -24,7 +25,7 @@ class MessageActions extends CustomElement {
     static getActionsDropdownItem (o) {
         return html`
             <button class="chat-msg__action ${o.button_class}" @click=${o.handler}>
-                <fa-icon class="${o.icon_class}" path-prefix="/dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+                <fa-icon class="${o.icon_class}" path-prefix="${api.settings.get("assets_path")}" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
                 ${o.i18n_text}
             </button>
         `;

src/templates/directives/retraction.js

-import { directive, html } from "lit-html";
 import { __ } from '@converse/headless/i18n';
+import { api } from "@converse/headless/converse-core";
+import { directive, html } from "lit-html";
 
 
 const i18n_retract_message = __('Retract this message');
 const tpl_retract = (o) => html`
     <button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
-        <fa-icon class="fas fa-trash-alt" path-prefix="/dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+        <fa-icon class="fas fa-trash-alt" path-prefix="${api.settings.get("assets_path")}" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
     </button>
 `;