diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index be1f29629ed..0684a1fd69d 100644
--- a/addons/web/static/src/js/components/dropdown_menu.js
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -61,6 +61,14 @@ odoo.define('web.DropdownMenu', function (require) {
             return this.env.device.isMobile;
         }
 
+        /**
+         * Can be overriden to force an icon on an inheriting class.
+         * @returns {string} Font Awesome icon class
+         */
+        get icon() {
+            return this.props.icon;
+        }
+
         /**
          * Meant to be overriden to provide the list of items to display.
          * @returns {Object[]}
diff --git a/addons/web/static/src/js/control_panel/favorite_menu.js b/addons/web/static/src/js/control_panel/favorite_menu.js
index 73bedc4ffdb..066b30f30d5 100644
--- a/addons/web/static/src/js/control_panel/favorite_menu.js
+++ b/addons/web/static/src/js/control_panel/favorite_menu.js
@@ -3,6 +3,7 @@ odoo.define('web.FavoriteMenu', function (require) {
 
     const Dialog = require('web.OwlDialog');
     const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS } = require("web.searchUtils");
     const Registry = require('web.Registry');
     const { useModel } = require('web.model');
 
@@ -29,6 +30,13 @@ odoo.define('web.FavoriteMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.favorite;
+        }
+
         /**
          * @override
          */
@@ -93,9 +101,6 @@ odoo.define('web.FavoriteMenu', function (require) {
     FavoriteMenu.components = Object.assign({}, DropdownMenu.components, {
         Dialog,
     });
-    FavoriteMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-star',
-    });
     FavoriteMenu.template = 'web.FavoriteMenu';
 
     return FavoriteMenu;
diff --git a/addons/web/static/src/js/control_panel/filter_menu.js b/addons/web/static/src/js/control_panel/filter_menu.js
index 47f01d22681..2341def75b0 100644
--- a/addons/web/static/src/js/control_panel/filter_menu.js
+++ b/addons/web/static/src/js/control_panel/filter_menu.js
@@ -1,8 +1,9 @@
 odoo.define('web.FilterMenu', function (require) {
     "use strict";
 
-    const DropdownMenu = require('web.DropdownMenu');
     const CustomFilterItem = require('web.CustomFilterItem');
+    const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS } = require("web.searchUtils");
     const { useModel } = require('web.model');
 
     /**
@@ -26,6 +27,13 @@ odoo.define('web.FilterMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.filter;
+        }
+
         /**
          * @override
          */
@@ -62,9 +70,6 @@ odoo.define('web.FilterMenu', function (require) {
     FilterMenu.components = Object.assign({}, DropdownMenu.components, {
         CustomFilterItem,
     });
-    FilterMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-filter',
-    });
     FilterMenu.props = Object.assign({}, DropdownMenu.props, {
         fields: Object,
     });
diff --git a/addons/web/static/src/js/control_panel/groupby_menu.js b/addons/web/static/src/js/control_panel/groupby_menu.js
index 858f2a7953e..97bad1a2ce7 100644
--- a/addons/web/static/src/js/control_panel/groupby_menu.js
+++ b/addons/web/static/src/js/control_panel/groupby_menu.js
@@ -1,9 +1,9 @@
 odoo.define('web.GroupByMenu', function (require) {
     "use strict";
 
-    const { GROUPABLE_TYPES } = require('web.searchUtils');
-    const DropdownMenu = require('web.DropdownMenu');
     const CustomGroupByItem = require('web.CustomGroupByItem');
+    const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS, GROUPABLE_TYPES } = require('web.searchUtils');
     const { useModel } = require('web.model');
 
     /**
@@ -31,6 +31,13 @@ odoo.define('web.GroupByMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.groupBy;
+        }
+
         /**
          * @override
          */
@@ -82,9 +89,6 @@ odoo.define('web.GroupByMenu', function (require) {
     GroupByMenu.components = Object.assign({}, DropdownMenu.components, {
         CustomGroupByItem,
     });
-    GroupByMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-bars',
-    });
     GroupByMenu.props = Object.assign({}, DropdownMenu.props, {
         fields: Object,
     });
diff --git a/addons/web/static/src/js/control_panel/search_utils.js b/addons/web/static/src/js/control_panel/search_utils.js
index da886004669..3a605faa2b8 100644
--- a/addons/web/static/src/js/control_panel/search_utils.js
+++ b/addons/web/static/src/js/control_panel/search_utils.js
@@ -136,10 +136,10 @@ odoo.define('web.searchUtils', function (require) {
 
     // Search bar
     const FACET_ICONS = {
-        filter: 'fa-filter',
-        groupBy: 'fa-bars',
-        favorite: 'fa-star',
-        timeRange: 'fa-calendar',
+        filter: 'fa fa-filter',
+        groupBy: 'fa fa-bars',
+        favorite: 'fa fa-star',
+        timeRange: 'fa fa-calendar',
     };
 
     return {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 999e12ebccd..6d71234a6c1 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -160,7 +160,7 @@
             t-on-click="state.open = !state.open"
             t-on-keydown="_onButtonKeydown"
             >
-            <i t-if="props.icon" t-att-class="props.icon"/>
+            <i t-if="icon" t-att-class="icon"/>
             <span class="o_dropdown_title" t-esc="title"/>
             <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
             <i t-elif="displayChevron" t-attf-class="fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
@@ -575,7 +575,7 @@
             t-on-keydown="_onFacetKeydown(facet, facet_index)"
             >
             <span t-if="facet.title" class="o_searchview_facet_label" t-esc="facet.title"/>
-            <span t-else="" t-attf-class="o_searchview_facet_label fa {{ facet.icon }}"/>
+            <span t-else="" t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
             <div class="o_facet_values">
                 <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                     <span t-if="!facetValue_first" class="o_facet_values_sep" t-esc="facet.separator"/>