[FIX] web: Command Menu with custom icon

Before this commit, if you create a new app with a custom icon with
studio and you open the command palette with the namespace "/", then
you will have an error message.

We have this error because the home_menu does not support custom menu
icons.

closes odoo/odoo#79158

X-original-commit: c5f5b1de07ee6b8b09ae1821c4c0debc0d09f55e
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/core/commands/command_palette.scss

@@ -90,8 +90,19 @@
       }
 
       .o_app_icon {
+        position: relative;
         border-radius: 4%;
         height: 1.8em;
+        width: 1.8em;
+
+        &> i.fa {
+          text-align: center;
+          position: absolute;
+          top: 25%;
+          left: 0;
+          bottom: auto;
+          right: 0;
+        }
       }
     }
   }

addons/web/static/src/core/commands/command_palette.xml

@@ -56,7 +56,10 @@
   <t t-name="web.AppIconCommand" owl="1">
     <div class="o_command_default">
         <span t-esc="props.name"/>
-        <img class="o_app_icon" t-attf-src="{{props.webIconData}}"/>
+        <img t-if="props.webIconData" class="o_app_icon" t-attf-src="{{props.webIconData}}"/>
+        <div t-else="" class="o_app_icon" t-attf-style="background-color:{{props.webIcon.backgroundColor}}" >
+          <i t-att-class="props.webIcon.iconClass" t-attf-style="color:{{props.webIcon.color}}"></i>
+        </div>
     </div>
   </t>
 

addons/web/static/src/webclient/menus/menu_providers.js

@@ -41,10 +41,15 @@ commandProviderRegistry.add("menu", {
         }
 
         apps.forEach((menu) => {
-            const prefix = "data:image/png;base64,";
-            const webIconData = menu.webIconData.startsWith(prefix)
-                ? menu.webIconData
-                : prefix + menu.webIconData.replace(/\s/g, "");
+            const props = {};
+            if (menu.webIconData) {
+                const prefix = "data:image/png;base64,";
+                props.webIconData = menu.webIconData.startsWith(prefix)
+                    ? menu.webIconData
+                    : prefix + menu.webIconData.replace(/\s/g, "");
+            } else {
+                props.webIcon = menu.webIcon;
+            }
             result.push({
                 Component: AppIconCommand,
                 action() {
@@ -52,9 +57,7 @@ commandProviderRegistry.add("menu", {
                 },
                 category: "apps",
                 name: menu.label,
-                props: {
-                    webIconData: webIconData,
-                },
+                props,
             });
         });