From 4e53953756b26e103efd479148e831b111c093d3 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 28 Jan 2022 08:21:01 +0000
Subject: [PATCH] [REF] web, mail: apply odoo icons

This commit is part of v16 overall restyle (task-2704984).

enterprise: https://github.com/odoo/enterprise/pull/23848
task-2745275

Part-of: odoo/odoo#83501
---
 .../messaging_menu/messaging_menu.scss        |  4 --
 .../messaging_menu/messaging_menu.xml         |  2 +-
 .../tests/messaging_menu_tests.js             |  2 +-
 .../src/js/views/activity/activity_view.js    |  2 +-
 addons/mail/static/src/scss/systray.scss      |  5 --
 addons/mail/static/src/xml/systray.xml        |  2 +-
 .../web/static/src/core/debug/debug_menu.xml  |  2 +-
 .../legacy/js/control_panel/search_utils.js   |  8 +--
 .../legacy/js/views/calendar/calendar_view.js |  2 +-
 .../src/legacy/js/views/kanban/kanban_view.js |  2 +-
 .../src/legacy/js/views/list/list_renderer.js |  2 +-
 .../src/legacy/js/views/list/list_view.js     |  2 +-
 addons/web/static/src/legacy/xml/base.xml     | 20 +++----
 .../comparison_menu/comparison_menu.xml       |  2 +-
 .../search/control_panel/control_panel.xml    |  2 +-
 .../search/favorite_menu/favorite_menu.xml    |  2 +-
 .../src/search/filter_menu/filter_menu.xml    |  2 +-
 .../search/group_by_menu/group_by_menu.xml    |  2 +-
 .../src/search/search_bar/search_bar.xml      |  4 +-
 addons/web/static/src/search/utils/misc.js    |  8 +--
 .../web/static/src/views/graph/graph_view.js  |  2 +-
 .../web/static/src/views/graph/graph_view.xml | 12 ++--
 .../web/static/src/views/pivot/pivot_view.js  |  2 +-
 .../static/src/webclient/navbar/navbar.xml    |  4 +-
 .../tests/core/debug/debug_manager_tests.js   |  4 +-
 .../control_panel/comparison_menu_tests.js    |  2 +-
 .../control_panel/favorite_menu_tests.js      |  2 +-
 .../legacy/control_panel/filter_menu_tests.js |  2 +-
 .../control_panel/groupby_menu_tests.js       |  2 +-
 .../static/tests/legacy/views/graph_tests.js  |  4 +-
 .../tests/search/comparison_menu_tests.js     |  2 +-
 .../web/static/tests/search/control_panel.js  |  6 +-
 .../tests/search/favorite_menu_tests.js       |  4 +-
 .../static/tests/search/filter_menu_tests.js  |  2 +-
 .../tests/search/group_by_menu_tests.js       |  2 +-
 .../static/tests/views/graph_view_tests.js    | 56 +++++++++----------
 .../webclient/actions/window_action_tests.js  | 12 ++--
 37 files changed, 94 insertions(+), 103 deletions(-)

diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 3d48947cad9..d1ab448d734 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -74,10 +74,6 @@
     margin-right: map-get($spacers, 1);
 }
 
-.o_MessagingMenu_icon {
-    font-size: larger;
-}
-
 .o_MessagingMenu_loading {
     font-size: small;
     position: absolute;
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 5ce4d6de708..182dd6d1c82 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.MessagingMenu" owl="1">
         <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': messaging ? messaging.device.isMobile : false }" t-attf-class="{{ className }}" t-ref="root">
             <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
-                <i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/>
+                <i class="o_MessagingMenu_icon oi oi-large oi-discuss" role="img" aria-label="Messages"/>
                 <t t-if="!messagingMenu or !messaging.isInitialized">
                     <i class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin"/>
                 </t>
diff --git a/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js b/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
index 84db52998ae..b8e65de9bad 100644
--- a/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
+++ b/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
@@ -153,7 +153,7 @@ QUnit.test('basic rendering', async function (assert) {
         "should have icon on clickable element in messaging menu"
     );
     assert.ok(
-        document.querySelector(`.o_MessagingMenu_icon`).classList.contains('fa-comments'),
+        document.querySelector(`.o_MessagingMenu_icon`).classList.contains('oi-discuss'),
         "should have 'comments' icon on clickable element in messaging menu"
     );
     assert.strictEqual(
diff --git a/addons/mail/static/src/js/views/activity/activity_view.js b/addons/mail/static/src/js/views/activity/activity_view.js
index 44cab433c78..938c7dd5d4e 100644
--- a/addons/mail/static/src/js/views/activity/activity_view.js
+++ b/addons/mail/static/src/js/views/activity/activity_view.js
@@ -14,7 +14,7 @@ const _lt = core._lt;
 const ActivityView = BasicView.extend({
     accesskey: "a",
     display_name: _lt('Activity'),
-    icon: 'fa-clock-o',
+    icon: 'oi-event--schedule',
     config: _.extend({}, BasicView.prototype.config, {
         Controller: ActivityController,
         Model: ActivityModel,
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 9a46d099928..edf921fa618 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -1,10 +1,5 @@
 // Systray icon and dropdown
 .o_mail_systray_item {
-    > a {
-        > i {
-            font-size: larger;
-        }
-    }
     &.o_no_notification > a {
         @include o-mail-systray-no-notification-style();
 
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index ddfbee91c0c..93a8f359540 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -51,7 +51,7 @@
     <t t-name="mail.systray.ActivityMenu">
         <div class="o_mail_systray_item dropdown">
             <a class="dropdown-toggle o-no-caret o-dropdown--narrow" data-toggle="dropdown" data-display="static" aria-expanded="false" title="Activities" href="#" role="button">
-                <i class="fa fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge badge-pill"/>
+                <i class="oi oi-large oi-calendar" role="img" aria-label="Activities"/> <span class="o_notification_counter badge  badge-pill"/>
             </a>
             <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
                 <div class="o_mail_systray_dropdown_items"/>
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index a65e02ea73d..104ead6fcbc 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -7,7 +7,7 @@
           position="'bottom-end'"
           togglerClass="`o-dropdown--narrow ${env.inDialog?'btn btn-link':''}`">
             <t t-set-slot="toggler">
-                <i class="fa fa-bug"/>
+                <i class="oi oi-large oi-debug"/>
             </t>
             <t t-foreach="elements" t-as="element" t-key="element_index">
                 <DropdownItem
diff --git a/addons/web/static/src/legacy/js/control_panel/search_utils.js b/addons/web/static/src/legacy/js/control_panel/search_utils.js
index d672f3b0c5f..221e959bde8 100644
--- a/addons/web/static/src/legacy/js/control_panel/search_utils.js
+++ b/addons/web/static/src/legacy/js/control_panel/search_utils.js
@@ -179,10 +179,10 @@ odoo.define('web.searchUtils', function (require) {
     };
     // Search bar
     const FACET_ICONS = {
-        filter: 'fa fa-filter',
-        groupBy: 'fa fa-bars',
-        favorite: 'fa fa-star',
-        comparison: 'fa fa-adjust',
+        filter: 'oi oi-small oi-filter',
+        groupBy: 'oi oi-small oi-layers',
+        favorite: 'oi oi-small oi-star',
+        comparison: 'oi oi-small oi-contrast',
     };
 
     //-------------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/views/calendar/calendar_view.js b/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
index 582471e1ecf..802e103cfa7 100644
--- a/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
+++ b/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
@@ -30,7 +30,7 @@ const scalesInfo = {
 
 var CalendarView = AbstractView.extend({
     display_name: _lt('Calendar'),
-    icon: 'fa-calendar',
+    icon: 'oi-calendar',
     jsLibs: [
         '/web/static/lib/fullcalendar/core/main.js',
         '/web/static/lib/fullcalendar/interaction/main.js',
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_view.js b/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
index 3ca03167306..ebd160bbdd4 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
@@ -14,7 +14,7 @@ var _lt = core._lt;
 var KanbanView = BasicView.extend({
     accesskey: "k",
     display_name: _lt("Kanban"),
-    icon: 'fa-th-large',
+    icon: 'oi-align--vertical-top',
     mobile_friendly: true,
     config: _.extend({}, BasicView.prototype.config, {
         Model: KanbanModel,
diff --git a/addons/web/static/src/legacy/js/views/list/list_renderer.js b/addons/web/static/src/legacy/js/views/list/list_renderer.js
index f648e21880c..ba5584e8664 100644
--- a/addons/web/static/src/legacy/js/views/list/list_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_renderer.js
@@ -1129,7 +1129,7 @@ var ListRenderer = BasicRenderer.extend({
             if (this._shouldRenderOptionalColumnsDropdown()) {
                 this.el.classList.add('o_list_optional_columns');
                 this.$('table').append(
-                    $('<i class="o_optional_columns_dropdown_toggle fa fa-ellipsis-v"/>')
+                    $('<i class="o_optional_columns_dropdown_toggle oi oi-settings--adjust"/>')
                 );
                 this.$el.append(this._renderOptionalColumnsDropdown());
             }
diff --git a/addons/web/static/src/legacy/js/views/list/list_view.js b/addons/web/static/src/legacy/js/views/list/list_view.js
index bdf0a2ba89b..13600ecad25 100644
--- a/addons/web/static/src/legacy/js/views/list/list_view.js
+++ b/addons/web/static/src/legacy/js/views/list/list_view.js
@@ -20,7 +20,7 @@ var _lt = core._lt;
 var ListView = BasicView.extend({
     accesskey: "l",
     display_name: _lt('List'),
-    icon: 'fa-list-ul',
+    icon: 'oi-table',
     config: _.extend({}, BasicView.prototype.config, {
         Model: ListModel,
         Renderer: ListRenderer,
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 12c4ba9a8fe..090f4d13ea8 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -32,7 +32,7 @@
                     t-ref="searchView"
                     >
                     <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
-                        <i class="o_searchview_icon fa fa-search"
+                        <i class="o_searchview_icon oi oi-search"
                             title="Search..."
                             role="img"
                             aria-label="Search..."
@@ -354,7 +354,7 @@
                     <span class="o_facet_value" t-esc="facetValue"/>
                 </t>
             </div>
-            <i class="fa fa-sm fa-remove o_facet_remove"
+            <i class="o_facet_remove oi oi-close ms-1"
                 role="img"
                 aria-label="Remove"
                 title="Remove"
@@ -425,7 +425,7 @@
     <t t-set="buttonLabel">View %s</t>
     <button type="button"
         t-att-accesskey="view.accessKey"
-        t-attf-class="btn btn-light fa fa-lg o_switch_view o_{{ view.type }} {{ view.icon }}"
+        t-attf-class="btn btn-light oi o_switch_view o_{{ view.type }} {{ view.icon }}"
         t-att-class="{ active: env.view.type === view.type }"
         t-att-aria-label="sprintf(buttonLabel.toString(), view.type)"
         t-att-data-tooltip="view.name"
@@ -594,7 +594,7 @@
             </button>
         </t>
         <t t-if="widget.is_action_enabled('export_xlsx') and widget.isExportEnable">
-            <button type="button" class="btn btn-secondary fa fa-download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
+            <button type="button" class="btn btn-secondary oi oi-document--download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
         </t>
     </div>
 </t>
@@ -747,16 +747,16 @@
 <t t-name="GraphView.buttons">
     <div class="btn-group mb-2 mb-sm-auto" role="toolbar" aria-label="Main actions"/>
     <div class="btn-group o_graph_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
-        <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
-        <button class="btn btn-secondary fa fa-area-chart o_graph_button" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
-        <button class="btn btn-secondary fa fa-pie-chart o_graph_button" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
+        <button class="btn btn-secondary o_graph_button oi oi-chart--column" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
+        <button class="btn btn-secondary o_graph_button oi oi-chart--area--filled" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
+        <button class="btn btn-secondary o_graph_button oi oi-chart--pie" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
     </div>
     <div class="btn-group o_stack_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
-        <button class="btn btn-secondary fa fa-database o_graph_button" title="Stacked" aria-label="Stacked" data-mode="stack"/>
+        <button class="btn btn-secondary o_graph_button oi oi-chart--stacked" title="Stacked" aria-label="Stacked" data-mode="stack"/>
     </div>
     <div class="btn-group o_sort_align mb-2 mb-sm-auto" role="toolbar" aria-label="Sort graph">
-        <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" title="Descending" aria-label="Descending" data-order="desc"/>
-        <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" title="Ascending" aria-label="Ascending" data-order="asc"/>
+        <button class="btn btn-secondary o_graph_button oi oi-sort--descending" title="Descending" aria-label="Descending" data-order="desc"/>
+        <button class="btn btn-secondary o_graph_button oi oi-sort--ascending" title="Ascending" aria-label="Ascending" data-order="asc"/>
     </div>
 </t>
 
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
index 492497a6906..0ecf335b65c 100644
--- a/addons/web/static/src/search/comparison_menu/comparison_menu.xml
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.ComparisonMenu" owl="1">
         <Dropdown class="o_comparison_menu btn-group" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="small mr-1" t-att-class="icon"/>
+                <i class="mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Comparison</span>
             </t>
             <t t-foreach="items" t-as="item" t-key="item.id">
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 9cce98dfd73..6423d5dbdd9 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -38,7 +38,7 @@
                     <t t-if="env.config.viewSwitcherEntries.length">
                         <nav class="btn-group o_cp_switch_buttons">
                             <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
-                                <button class="btn btn-light fa fa-lg o_switch_view "
+                                <button class="btn btn-light oi o_switch_view "
                                     t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
                                     t-att-data-tooltip="view.name"
                                     t-on-click="onViewClicked(view.type)"
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
index d7dcef23a8b..361598d7995 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FavoriteMenu" owl="1">
         <Dropdown class="o_favorite_menu btn-group" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="small mr-1" t-att-class="icon"/>
+                <i class="oi-small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Favorites</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
index 66071013c8a..7d52d6b6dc1 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.xml
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FilterMenu" owl="1">
         <Dropdown class="o_filter_menu btn-group" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="small mr-1" t-att-class="icon"/>
+                <i class="oi-small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Filters</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
index d61b0a25154..4ca9a351246 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -7,7 +7,7 @@
             t-props="dropdownProps"
         >
             <t t-set-slot="toggler">
-                <i class="small mr-1" t-att-class="icon"/>
+                <i class="oi-small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ml-1"/></t></span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index d1116f6cd4f..b65f4a299da 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -23,7 +23,7 @@
                         <span class="o_facet_value" t-esc="facetValue"/>
                     </t>
                 </div>
-                <i class="fa fa-sm fa-remove o_facet_remove"
+                <i class="o_facet_remove oi oi-close"
                     role="img"
                     aria-label="Remove"
                     title="Remove"
@@ -79,7 +79,7 @@
     <t t-name="web.SearchBar" owl="1">
         <div class="o_cp_searchview" role="search">
             <div class="o_searchview" role="search" aria-autocomplete="list">
-                <i class="o_searchview_icon fa fa-search"
+                <i class="o_searchview_icon oi oi-search"
                     role="img"
                     aria-label="Search..."
                     title="Search..."
diff --git a/addons/web/static/src/search/utils/misc.js b/addons/web/static/src/search/utils/misc.js
index 79e470b70df..9aad58c9194 100644
--- a/addons/web/static/src/search/utils/misc.js
+++ b/addons/web/static/src/search/utils/misc.js
@@ -1,10 +1,10 @@
 /** @odoo-module **/
 
 export const FACET_ICONS = {
-    filter: "fa fa-filter",
-    groupBy: "fa fa-bars",
-    favorite: "fa fa-star",
-    comparison: "fa fa-adjust",
+    filter: "oi oi-filter",
+    groupBy: "oi oi-layers",
+    favorite: "oi oi-star",
+    comparison: "oi oi-contrast",
 };
 
 export const GROUPABLE_TYPES = [
diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js
index 04819fb673b..53303402e24 100644
--- a/addons/web/static/src/views/graph/graph_view.js
+++ b/addons/web/static/src/views/graph/graph_view.js
@@ -153,7 +153,7 @@ GraphView.props = {
 GraphView.type = "graph";
 
 GraphView.display_name = _lt("Graph");
-GraphView.icon = "fa-bar-chart";
+GraphView.icon = "oi oi-chart--line-smooth";
 GraphView.multiRecord = true;
 
 GraphView.Model = GraphModel;
diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml
index 3e8c0effafa..8c9b9e735a2 100644
--- a/addons/web/static/src/views/graph/graph_view.xml
+++ b/addons/web/static/src/views/graph/graph_view.xml
@@ -14,31 +14,31 @@
             </div>
         </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+            <button class="btn btn-secondary oi oi-chart--column o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
             />
-            <button class="btn btn-secondary fa fa-area-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+            <button class="btn btn-secondary oi oi-chart--area--filled o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
                 t-on-click="onModeSelected('line')"
                 t-att-class="{ active: model.metaData.mode === 'line' }"
             />
-            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+            <button class="btn btn-secondary oi oi-chart--pie o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
                 t-on-click="onModeSelected('pie')"
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
         <div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-secondary oi oi-chart--stacked o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
-            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
+            <button class="btn btn-secondary oi oi-sort--descending o_graph_button" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"
             />
-            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+            <button class="btn btn-secondary oi oi-sort--ascending o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
                 t-on-click="toggleOrder('ASC')"
                 t-att-class="{ active: model.metaData.order === 'ASC' }"
             />
diff --git a/addons/web/static/src/views/pivot/pivot_view.js b/addons/web/static/src/views/pivot/pivot_view.js
index e23da6c0bb1..b44759fd14f 100644
--- a/addons/web/static/src/views/pivot/pivot_view.js
+++ b/addons/web/static/src/views/pivot/pivot_view.js
@@ -173,7 +173,7 @@ PivotView.ArchParser = PivotArchParser;
 
 PivotView.type = "pivot";
 PivotView.display_name = _lt("Pivot");
-PivotView.icon = "fa-table";
+PivotView.icon = "oi-cross-tab";
 PivotView.multiRecord = true;
 PivotView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
 
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index db335b09132..148cdd40e79 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -44,7 +44,7 @@
   <t t-name="web.NavBar.AppsMenu" owl="1">
     <Dropdown hotkey="'h'" title="'Home Menu'" class="o_navbar_apps_menu">
       <t t-set-slot="toggler">
-        <i class="fa fa-th-large" />
+        <i class="oi oi-apps" />
       </t>
       <DropdownItem
         t-foreach="apps"
@@ -143,7 +143,7 @@
   <t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
     <Dropdown class="o_menu_sections_more" title="'More Menu'" hotkey="hotkey">
       <t t-set-slot="toggler">
-        <i class="fa fa-plus" />
+        <i class="oi oi-large oi-add--thick"/>
       </t>
       <t t-foreach="sections" t-as="section" t-key="section.id">
 
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index 2826b332d0f..1b25ad93117 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -178,7 +178,7 @@ QUnit.module("DebugMenu", (hooks) => {
             actionDialog.destroy();
         });
         assert.containsOnce(target, ".o_dialog");
-        assert.containsNone(target, ".o_dialog .o_debug_manager .fa-bug");
+        assert.containsNone(target, ".o_dialog .o_debug_manager .oi-debug");
     });
 
     QUnit.test(
@@ -235,7 +235,7 @@ QUnit.module("DebugMenu", (hooks) => {
                 actionDialog.destroy();
             });
             assert.containsOnce(target, ".o_dialog");
-            assert.containsOnce(target, ".o_dialog .o_debug_manager .fa-bug");
+            assert.containsOnce(target, ".o_dialog .o_debug_manager .oi-debug");
             await click(target, ".o_dialog .o_debug_manager button");
             const debugManagerEl = target.querySelector(".o_debug_manager");
             assert.containsN(debugManagerEl, ".dropdown-menu .dropdown-item", 2);
diff --git a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
index ab697122950..2d4a56834c3 100644
--- a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
@@ -54,7 +54,7 @@ odoo.define('web.comparison_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
             await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", "January");
 
-            assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.fa.fa-adjust');
+            assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.oi.oi-contrast');
             assert.strictEqual(controlPanel.el.querySelector('div.o_comparison_menu > button span').innerText.trim(), "Comparison");
 
             await cpHelpers.toggleComparisonMenu(controlPanel);
diff --git a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
index 7434c619cda..9f99db26366 100644
--- a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
@@ -39,7 +39,7 @@ odoo.define('web.favorite_menu_tests', function (require) {
             };
             const controlPanel = await createControlPanel(params);
 
-            assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.fa.fa-star');
+            assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.oi.oi-star');
             assert.strictEqual(controlPanel.el.querySelector('div.o_favorite_menu > button span').innerText.trim(), "Favorites");
 
             await cpHelpers.toggleFavoriteMenu(controlPanel);
diff --git a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
index 1fa900093e6..bca5afaf33e 100644
--- a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
@@ -109,7 +109,7 @@ odoo.define('web.filter_menu_tests', function (require) {
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Foo']);
             assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
-                'span.fa.fa-filter.o_searchview_facet_label');
+                'span.oi.oi-filter.o_searchview_facet_label');
 
             assert.ok(cpHelpers.isItemSelected(controlPanel, "Foo"));
 
diff --git a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
index 648a84b7a14..795e3744773 100644
--- a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
@@ -114,7 +114,7 @@ odoo.define('web.groupby_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, 0);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Groupby Foo']);
             assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
-                'span.fa.fa-bars.o_searchview_facet_label');
+                'span.oi.oi-layers.o_searchview_facet_label');
             assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
 
             await cpHelpers.toggleMenuItem(controlPanel, 0);
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index 460ac2b6a6a..fbb0862578f 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -1754,7 +1754,7 @@ QUnit.module('Views', {
 
             this.selectTimeRanges = async (comparisonOptionId, basicDomainId) => {
                 const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
-                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.fa-filter'));
+                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-filter'));
                 if (facetIndex > -1) {
                     await cpHelpers.removeFacet(graph.el, facetIndex);
                 }
@@ -1776,7 +1776,7 @@ QUnit.module('Views', {
                 const productWasSelected = cpHelpers.isItemSelected(graph.el, 'Product');
 
                 const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
-                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.fa-bars'));
+                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-layers'));
                 if (facetIndex > -1) {
                     await cpHelpers.removeFacet(graph.el, facetIndex);
                     await cpHelpers.toggleGroupByMenu(graph.el);
diff --git a/addons/web/static/tests/search/comparison_menu_tests.js b/addons/web/static/tests/search/comparison_menu_tests.js
index ccde0a117b8..4fdbbbbd95b 100644
--- a/addons/web/static/tests/search/comparison_menu_tests.js
+++ b/addons/web/static/tests/search/comparison_menu_tests.js
@@ -59,7 +59,7 @@ QUnit.module("Search", (hooks) => {
         await toggleFilterMenu(controlPanel);
         await toggleMenuItem(controlPanel, "Birthday");
         await toggleMenuItemOption(controlPanel, "Birthday", "January");
-        assert.containsOnce(controlPanel, "div.o_comparison_menu > button i.fa.fa-adjust");
+        assert.containsOnce(controlPanel, "div.o_comparison_menu > button i.oi.oi-contrast");
         assert.strictEqual(
             controlPanel.el
                 .querySelector("div.o_comparison_menu > button span")
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index d7a4874a924..13a980646d7 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -82,8 +82,8 @@ QUnit.module("Search", (hooks) => {
             Component: ControlPanel,
             config: {
                 viewSwitcherEntries: [
-                    { type: "list", active: true, icon: "fa-list-ul", name: "List" },
-                    { type: "kanban", icon: "fa-th-large", name: "Kanban" },
+                    { type: "list", active: true, icon: "oi-table", name: "List" },
+                    { type: "kanban", icon: "oi-align--vertical-top", name: "Kanban" },
                 ],
             },
             searchMenuTypes: [],
@@ -96,7 +96,7 @@ QUnit.module("Search", (hooks) => {
         assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
         assert.hasClass(views[0], "active");
         assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
-        assert.hasClass(views[1], "fa-th-large");
+        assert.hasClass(views[1], "oi-align--vertical-top");
 
         controlPanel.env.services.action.switchView = (viewType) => {
             assert.step(viewType);
diff --git a/addons/web/static/tests/search/favorite_menu_tests.js b/addons/web/static/tests/search/favorite_menu_tests.js
index cceaa6d593d..8fa646f7b09 100644
--- a/addons/web/static/tests/search/favorite_menu_tests.js
+++ b/addons/web/static/tests/search/favorite_menu_tests.js
@@ -73,7 +73,7 @@ QUnit.module("Search", (hooks) => {
                 },
             });
 
-            assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.fa.fa-star");
+            assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.oi.oi-star");
             assert.strictEqual(
                 controlPanel.el
                     .querySelector("div.o_favorite_menu > button span")
@@ -106,7 +106,7 @@ QUnit.module("Search", (hooks) => {
             },
         });
 
-        assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.fa.fa-star");
+        assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.oi.oi-star");
         assert.strictEqual(
             controlPanel.el
                 .querySelector("div.o_favorite_menu > button span")
diff --git a/addons/web/static/tests/search/filter_menu_tests.js b/addons/web/static/tests/search/filter_menu_tests.js
index b3948c278d3..0ab34536079 100644
--- a/addons/web/static/tests/search/filter_menu_tests.js
+++ b/addons/web/static/tests/search/filter_menu_tests.js
@@ -118,7 +118,7 @@ QUnit.module("Search", (hooks) => {
         assert.deepEqual(getFacetTexts(controlPanel), ["Foo"]);
         assert.containsOnce(
             controlPanel.el.querySelector(".o_searchview .o_searchview_facet"),
-            "span.fa.fa-filter.o_searchview_facet_label"
+            "span.oi.oi-filter.o_searchview_facet_label"
         );
         assert.ok(isItemSelected(controlPanel, "Foo"));
         assert.deepEqual(getDomain(controlPanel), [["foo", "=", "qsdf"]]);
diff --git a/addons/web/static/tests/search/group_by_menu_tests.js b/addons/web/static/tests/search/group_by_menu_tests.js
index d9b9c1da368..3da3dd75bdf 100644
--- a/addons/web/static/tests/search/group_by_menu_tests.js
+++ b/addons/web/static/tests/search/group_by_menu_tests.js
@@ -136,7 +136,7 @@ QUnit.module("Search", (hooks) => {
         assert.deepEqual(getFacetTexts(controlPanel), ["Foo"]);
         assert.containsOnce(
             controlPanel.el.querySelector(".o_searchview .o_searchview_facet"),
-            "span.fa.fa-bars.o_searchview_facet_label"
+            "span.oi.oi-layers.o_searchview_facet_label"
         );
         assert.ok(isItemSelected(controlPanel, "Foo"));
 
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index 715e1e14148..d826cfa56e1 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -3011,37 +3011,37 @@ QUnit.module("Views", (hooks) => {
             `,
         });
 
-        assert.containsOnce(graph, "button.fa-sort-amount-asc");
-        assert.containsOnce(graph, "button.fa-sort-amount-desc");
+        assert.containsOnce(graph, "button.oi-sort--ascending");
+        assert.containsOnce(graph, "button.oi-sort--descending");
 
         checkLegend(assert, graph, "Count", "measure should be by count");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             'sorting should be applie on descending order by default when sorting="desc"'
         );
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
-        await click(graph.el, "button.fa-sort-amount-asc");
+        await click(graph.el, "button.oi-sort--ascending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-asc"),
+            graph.el.querySelector("button.oi-sort--ascending"),
             "active",
             "ascending order should be applied"
         );
         checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
 
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should be active"
         );
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
         // again click on descending button to deactivate order button
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.doesNotHaveClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should not be active"
         );
@@ -3049,28 +3049,28 @@ QUnit.module("Views", (hooks) => {
 
         // set line mode
         await selectMode(graph, "line");
-        assert.containsOnce(graph, "button.fa-sort-amount-asc");
-        assert.containsOnce(graph, "button.fa-sort-amount-desc");
+        assert.containsOnce(graph, "button.oi-sort--ascending");
+        assert.containsOnce(graph, "button.oi-sort--descending");
 
         checkLegend(assert, graph, "Count", "measure should be by count");
         assert.doesNotHaveClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order should be applied"
         );
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
-        await click(graph.el, "button.fa-sort-amount-asc");
+        await click(graph.el, "button.oi-sort--ascending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-asc"),
+            graph.el.querySelector("button.oi-sort--ascending"),
             "active",
             "ascending order button should be active"
         );
         checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
 
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should be active"
         );
@@ -3099,26 +3099,26 @@ QUnit.module("Views", (hooks) => {
         checkLegend(assert, graph, ["true", "false"], "measure should be by count");
         checkDatasets(assert, graph, "data", [{ data: [3, 0, 0] }, { data: [1, 3, 1] }]);
 
-        await click(graph.el, "button.fa-sort-amount-asc");
+        await click(graph.el, "button.oi-sort--ascending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-asc"),
+            graph.el.querySelector("button.oi-sort--ascending"),
             "active",
             "ascending order should be applied by default"
         );
         checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [0, 0, 3] }]);
 
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "ascending order button should be active"
         );
         checkDatasets(assert, graph, "data", [{ data: [3, 0, 0] }, { data: [1, 3, 1] }]);
 
         // again click on descending button to deactivate order button
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.doesNotHaveClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should not be active"
         );
@@ -3159,9 +3159,9 @@ QUnit.module("Views", (hooks) => {
             { data: [1, 0, 0, 0] },
         ]);
 
-        await click(graph.el, "button.fa-sort-amount-asc");
+        await click(graph.el, "button.oi-sort--ascending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-asc"),
+            graph.el.querySelector("button.oi-sort--ascending"),
             "active",
             "ascending order should be applied by default"
         );
@@ -3171,9 +3171,9 @@ QUnit.module("Views", (hooks) => {
             { data: [0, 0, 0, 1] },
         ]);
 
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.hasClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should be active"
         );
@@ -3184,9 +3184,9 @@ QUnit.module("Views", (hooks) => {
         ]);
 
         // again click on descending button to deactivate order button
-        await click(graph.el, "button.fa-sort-amount-desc");
+        await click(graph.el, "button.oi-sort--descending");
         assert.doesNotHaveClass(
-            graph.el.querySelector("button.fa-sort-amount-desc"),
+            graph.el.querySelector("button.oi-sort--descending"),
             "active",
             "descending order button should not be active"
         );
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 2400f5c3dc8..cedb74f320a 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -1061,20 +1061,20 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel  .fa-bar-chart-o")[0],
+            $(webClient.el).find(".o_control_panel [data-mode='bar']")[0],
             "active",
             "bar chart button is active"
         );
         assert.doesNotHaveClass(
-            $(webClient.el).find(".o_control_panel  .fa-area-chart")[0],
+            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is not active"
         );
         // display line chart
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel  .fa-area-chart"));
+        await testUtils.dom.click($(webClient.el).find(".o_control_panel [data-mode='line']"));
         await legacyExtraNextTick();
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel  .fa-area-chart")[0],
+            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is now active"
         );
@@ -1083,13 +1083,13 @@ QUnit.module("ActionManager", (hooks) => {
         await legacyExtraNextTick();
         assert.containsNone(
             webClient.el,
-            ".o_control_panel  .fa-area-chart",
+            ".o_control_panel [data-mode='line']",
             "graph buttons are no longer in control panel"
         );
         await cpHelpers.switchView(webClient.el, "graph");
         await legacyExtraNextTick();
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel  .fa-area-chart")[0],
+            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is still active"
         );