[FIX] im_livechat: icons not loaded on embed livechat

task-3487807

closes odoo/odoo#133814

X-original-commit: d8c35b9cda7ca2e7539efc368e35aeddbd1b2e6f
Signed-off-by: Matthieu Stockbauer (tsm) <tsm@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/im_livechat/__manifest__.py

@@ -95,6 +95,7 @@ Help your customers with this chat, and analyse their feedback.
             'im_livechat/static/tests/tours/**/*',
         ],
         'im_livechat.assets_core': [
+            'web/static/lib/odoo_ui_icons/style.css',
             'mail/static/src/core/common/**/*',
             'mail/static/src/discuss/core/common/*',
             'mail/static/src/discuss/typing/**/*',

addons/im_livechat/controllers/main.py

@@ -40,6 +40,10 @@ class LivechatController(http.Controller):
     def fontawesome(self, **kwargs):
         return http.Stream.from_path('web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2').get_response()
 
+    @http.route('/im_livechat/odoo_ui_icons', type='http', auth='none', cors="*")
+    def odoo_ui_icons(self, **kwargs):
+        return http.Stream.from_path('web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2').get_response()
+
     @http.route('/im_livechat/emoji_bundle', type='http', auth='public', cors='*')
     def get_emoji_bundle(self):
         bundle = 'web.assets_emoji'

addons/im_livechat/static/src/embed/boot_helpers.js

@@ -2,23 +2,23 @@
 
 import { serverUrl } from "@im_livechat/embed/livechat_data";
 
-async function loadFontAwesome() {
+async function loadFont(name, url) {
     await document.fonts.ready;
-    if ([...document.fonts].some(({ family }) => family === "FontAwesome")) {
-        // FontAwesome already loaded.
+    if ([...document.fonts].some(({ family }) => family === name)) {
+        // Font already loaded.
         return;
     }
     const link = document.createElement("link");
     link.rel = "preload";
     link.as = "font";
-    link.href = `${serverUrl}/im_livechat/font-awesome`;
+    link.href = url;
     link.crossOrigin = "";
     const style = document.createElement("style");
     style.appendChild(
         document.createTextNode(`
             @font-face {
-                font-family: 'FontAwesome';
-                src: url('${serverUrl}/im_livechat/font-awesome') format('woff2');
+                font-family: ${name};
+                src: url('${url}') format('woff2');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -47,7 +47,7 @@ export function makeRoot(target) {
 
 /**
  * Initialize the livechat container by loading the styles and
- * FontAwesome.
+ * the fonts.
  *
  * @param {HTMLElement} root
  * @returns {ShadowRoot}
@@ -62,6 +62,10 @@ export async function makeShadow(root) {
     });
     const shadow = root.attachShadow({ mode: "open" });
     shadow.appendChild(link);
-    await Promise.all([stylesLoadedPromise, loadFontAwesome()]);
+    await Promise.all([
+        stylesLoadedPromise,
+        loadFont("FontAwesome", `${serverUrl}/im_livechat/font-awesome`),
+        loadFont("odoo_ui_icons", `${serverUrl}/im_livechat/odoo_ui_icons`),
+    ]);
     return shadow;
 }