From fb20b16d48fe475ef26a1812927f36888b4a3d27 Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Tue, 5 Oct 2021 12:10:41 +0000
Subject: [PATCH] [FIX] web_editor, *: review icon buttons sizing and paddings

*: mass_mailing, website, website_sale

Before this commit, it was impossible to add `fa-fw` directly on a
`we-button` as it would make the icon half invisible, since the whole
`we-button` would have the font-awesome `.fa-fw` css rule applied on it;
width: ~1.28em.

Then, one would need to insert a `<i/>` tag inside the `we-button` for
it to work.

This commit improves that behavior by handling automatically such cases,
and will preserve the purpose of the `fa-fw` class which is to have a
fixed width for those icons.

Note that the util class introduced in [1] (o_we_button_icon renamed
here in o_we_icon_button) is still useful to handle the case of svg
images, they are not allowed to shrink, the same way the fa buttons are.

[1]: https://github.com/odoo/odoo/commit/e4233643b93b521454cc146c6a2ae876781fb9ba

Related to task-2172311

closes odoo/odoo#77980

X-original-commit: e8ab9d76b802e80bb386812e4c8566825cbc2c92
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/mass_mailing/views/snippets/s_hr.xml   |  6 +--
 addons/mass_mailing/views/snippets_themes.xml | 12 ++---
 .../static/src/js/editor/snippets.options.js  | 23 +++++----
 .../static/src/scss/wysiwyg_snippets.scss     | 23 +++++++--
 addons/web_editor/static/src/xml/snippets.xml |  4 +-
 addons/web_editor/views/snippets.xml          | 29 +++++------
 .../src/snippets/s_website_form/options.js    |  5 +-
 .../website/views/snippets/s_embed_code.xml   |  6 +--
 addons/website/views/snippets/s_hr.xml        |  6 +--
 .../views/snippets/s_image_gallery.xml        |  8 +--
 .../views/snippets/s_table_of_content.xml     |  6 +--
 addons/website/views/snippets/s_tabs.xml      | 10 ++--
 addons/website/views/snippets/snippets.xml    | 49 +++++++------------
 .../website_sale/views/snippets/snippets.xml  |  4 +-
 14 files changed, 93 insertions(+), 98 deletions(-)

diff --git a/addons/mass_mailing/views/snippets/s_hr.xml b/addons/mass_mailing/views/snippets/s_hr.xml
index da434e10fca..94f2a4f43ab 100644
--- a/addons/mass_mailing/views/snippets/s_hr.xml
+++ b/addons/mass_mailing/views/snippets/s_hr.xml
@@ -21,9 +21,9 @@
                 <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
             </we-select>
             <we-button-group string="Alignment" data-dependencies="!so_width_100">
-                <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-                <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-                <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+                <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 70becfa2b80..61123795e6a 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -853,9 +853,9 @@
     <!-- H-ALIGN -->
     <div id="so_text_align" data-selector=".s_mail_text_highlight">
         <we-button-group string="Alignment">
-            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
         </we-button-group>
     </div>
 
@@ -870,9 +870,9 @@
 
     <div id="so_block_align" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
         <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
         </we-button-group>
     </div>
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 3540db98aa4..5131efdbfcb 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -665,16 +665,6 @@ const ButtonUserValueWidget = UserValueWidget.extend({
         'mouseleave': '_onUserValueReset',
     },
 
-    /**
-     * @override
-     */
-    start: function (parent, title, options) {
-        if (this.options && this.options.childNodes) {
-            this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
-        }
-
-        return this._super(...arguments);
-    },
     /**
      * @override
      */
@@ -689,11 +679,24 @@ const ButtonUserValueWidget = UserValueWidget.extend({
      */
     _makeDescriptive() {
         const $el = this._super(...arguments);
+        if (this.imgEl) {
+            $el[0].classList.add('o_we_icon_button');
+        }
         if (this.activeImgEl) {
             this.containerEl.appendChild(this.activeImgEl);
         }
         return $el;
     },
+    /**
+     * @override
+     */
+    start: function (parent, title, options) {
+        if (this.options && this.options.childNodes) {
+            this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
+        }
+
+        return this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 3f1405ec24f..098e57f2e60 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -793,10 +793,15 @@ body.editor_enable.editor_has_snippets {
                     we-button {
                         margin-top: 0 !important;
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
-                        padding: 0 $o-we-sidebar-content-field-multi-spacing;
+                        padding: 0 $o-we-sidebar-content-field-multi-spacing !important;
 
-                        &.fa, &[data-img] {
+                        &.fa, &.o_we_icon_button {
+                            box-sizing: content-box;
+                            width: 1.29em; // Fix width and override potential fa-fw
+                            padding: 0 0.15em !important;
                             margin-left: $o-we-sidebar-content-field-label-spacing;
+                            text-align: center;
+                            justify-content: center;
                         }
                     }
                 }
@@ -888,9 +893,17 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
-        // Buttons with an icon but no text, so no possible overflow
-        we-button.o_we_button_icon {
-            flex: 0 0 auto;
+        we-button {
+            // Prevent icon buttons to shrink
+            &.o_we_icon_button, &.fa {
+                flex: 0 0 auto;
+            }
+            // Buttons being `fa-fw`, prevent font-awesome hardcoded width
+            &.fa-fw {
+                padding: 0 .5em;
+                width: 2.29em; // .fa-fw = 1.28571429em (font-awesome.css)
+                justify-content: center;
+            }
         }
 
         // Checkboxes
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index e4aa11f69d1..13486f83f42 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -58,9 +58,7 @@
             </button>
             <t t-if="widget.resetButton">
                 <t t-set="trash_title"><t t-if="widget.withCombinations">None</t><t t-else="">Reset</t></t>
-                <button type="button" class="my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title">
-                    <i class="fa fa-trash"/>
-                </button>
+                <button type="button" class="fa fa-trash my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title"/>
             </t>
         </div>
         <div class="o_colorpicker_sections pt-2 px-2 pb-3" data-color-tab="color-combinations">
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 9b2a2b79b9f..94b034d4cf3 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -8,7 +8,7 @@
         </div>
         <form class="ml-auto">
             <!-- Uncomment the following line when the mobile preview will be available. -->
-            <!-- <button type="button" class="btn btn-secondary" name="mobile" data-action="mobilePreview"><i class="fa fa-mobile"></i></button> -->
+            <!-- <button type="button" class="btn btn-secondary fa fa-mobile" name="mobile" data-action="mobilePreview"/> -->
             <button type="button" class="btn btn-secondary" data-action="cancel" title="Discard record" accesskey="j">Discard</button>
             <button type="button" class="btn btn-primary" data-action="save" title="Save record" accesskey="s">Save</button>
         </form>
@@ -140,12 +140,11 @@
         <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
             <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
             <t t-if="with_images">
-                <we-button title="Image" class="ml-auto"
+                <we-button title="Image" class="ml-auto fa fa-fw fa-camera"
                            data-name="bg_image_toggle_opt"
                            t-att-data-dependencies="images_dependencies"
                            data-toggle-bg-image="true"
                            data-no-preview="true">
-                    <i class="fa fa-fw fa-camera"/>
                 </we-button>
                 <we-button title="Shape"
                            data-toggle-bg-shape="true"
@@ -184,9 +183,7 @@
                     <we-button data-background-type="cover">Cover</we-button>
                     <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
                 </we-select>
-                <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
-                    <i class="fa fa-fw fa-crosshairs"/>
-                </we-button>
+                <we-button class="fa fa-fw fa-crosshairs" title="Background Position" data-background-position-overlay="true" data-no-preview="true"/>
             </we-row>
             <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
                 <!-- &emsp; -->
@@ -356,8 +353,8 @@
                 </we-select-page>
             </we-select-pager>
             <we-row string=" ⌙ Flip"><!-- &emsp; -->
-                <we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
-                <we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
+                <we-button class="fa fa-fw fa-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
+                <we-button class="fa fa-fw fa-arrows-v" data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
             </we-row>
             <we-row string=" ⌙ Colors" data-name="colors">
                 <we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to="> .o_we_shape"/>
@@ -502,7 +499,7 @@
                         <we-button data-set-img-shape="web_editor/special/spl_circuit_1" data-select-label="Circuit" data-animated="true"/>
                     </we-select-page>
                 </we-select-pager>
-                <we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove"><i class="fa fa-fw fa-times"/></we-button>
+                <we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove fa fa-fw fa-times"/>
             </we-row>
             <we-row string=" ⌙ Colors">
                 <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0" />
@@ -518,13 +515,11 @@
 
     <div data-js="ImageTools" data-selector="img">
         <we-row string="Transform">
-            <we-button data-crop="true" data-no-preview="true" title="Crop Image"><i class="fa fa-crop"></i></we-button>
+            <we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
             <we-button class="ml-0 border-left-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
                 Reset
             </we-button>
-            <we-button data-transform="true" data-no-preview="true" title="Transform the picture">
-                <i class="fa fa-object-ungroup"></i>
-            </we-button>
+            <we-button class="fa fa-fw fa-object-ungroup" data-transform="true" data-no-preview="true" title="Transform the picture"/>
             <we-button class="ml-0 border-left-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
                 Reset
             </we-button>
@@ -547,10 +542,10 @@
         </we-select>
 
         <we-row string="Style">
-            <we-button data-select-class="rounded" title="Shape: Rounded"><i class="fa fa-square fa-fw"/></we-button>
-            <we-button data-select-class="rounded-circle" title="Shape: Circle"><i class="fa fa-circle-o fa-fw"/></we-button>
-            <we-button data-select-class="shadow" title="Shadow"><i class="fa fa-sun-o fa-fw"/></we-button>
-            <we-button data-select-class="img-thumbnail" title="Shape: Thumbnail"><i class="fa fa-picture-o fa-fw"/></we-button>
+            <we-button class="fa fa-fw fa-square" data-select-class="rounded" title="Shape: Rounded"/>
+            <we-button class="fa fa-fw fa-circle-o" data-select-class="rounded-circle" title="Shape: Circle"/>
+            <we-button class="fa fa-fw fa-sun-o" data-select-class="shadow" title="Shadow"/>
+            <we-button class="fa fa-fw fa-picture-o" data-select-class="img-thumbnail" title="Shape: Thumbnail"/>
         </we-row>
 
         <we-input string="Padding" data-select-style="" data-unit="px" data-css-property="padding"/>
diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js
index 34246b1696d..f38a65c946c 100644
--- a/addons/website/static/src/snippets/s_website_form/options.js
+++ b/addons/website/static/src/snippets/s_website_form/options.js
@@ -704,14 +704,11 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
      * @returns {HTMLElement}
      */
     _addCreateButton: function (element, action) {
-        const iconEl = document.createElement('i');
-        iconEl.classList.add('fa', 'fa-fw', 'fa-plus');
         const linkButtonEl = document.createElement('we-button');
         linkButtonEl.title = _t("Create new");
         linkButtonEl.dataset.noPreview = 'true';
         linkButtonEl.dataset.promptSaveRedirect = action;
-        linkButtonEl.classList.add('o_we_button_icon');
-        linkButtonEl.append(iconEl);
+        linkButtonEl.classList.add('fa', 'fa-fw', 'fa-plus');
         const projectRowEl = document.createElement('we-row');
         projectRowEl.append(element);
         projectRowEl.append(linkButtonEl);
diff --git a/addons/website/views/snippets/s_embed_code.xml b/addons/website/views/snippets/s_embed_code.xml
index e56ec7037d6..6e53cf218cb 100644
--- a/addons/website/views/snippets/s_embed_code.xml
+++ b/addons/website/views/snippets/s_embed_code.xml
@@ -19,9 +19,9 @@
                         title="Edit embedded code">Edit</we-button>
             </we-row>
             <we-button-group string="Alignment">
-                <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
-                <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
-                <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+                <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index adaac74fd41..fc03ec21787 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -21,9 +21,9 @@
                 <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
             </we-select>
             <we-button-group string="Alignment" data-dependencies="!so_width_100">
-                <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-                <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-                <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+                <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
+                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index e2e36c12851..f85e0b53621 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -121,10 +121,10 @@
         </div>
         <div data-js="gallery_img" data-selector=".s_image_gallery img">
             <we-row string="Re-order" data-no-preview="true">
-                <we-button title="Move to first" data-position="first"><i class="fa fa-fw fa-angle-double-left"/></we-button>
-                <we-button title="Move to previous" data-position="prev"><i class="fa fa-fw fa-angle-left"/></we-button>
-                <we-button title="Move to next" data-position="next"><i class="fa fa-fw fa-angle-right"/></we-button>
-                <we-button title="Move to last" data-position="last"><i class="fa fa-fw fa-angle-double-right"/></we-button>
+                <we-button class="fa fa-fw fa-angle-double-left" title="Move to first" data-position="first"/>
+                <we-button class="fa fa-fw fa-angle-left" title="Move to previous" data-position="prev"/>
+                <we-button class="fa fa-fw fa-angle-right" title="Move to next" data-position="next"/>
+                <we-button class="fa fa-fw fa-angle-double-right" title="Move to last" data-position="last"/>
             </we-row>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
index 0c15c359131..2f30d6fbbc6 100644
--- a/addons/website/views/snippets/s_table_of_content.xml
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -60,9 +60,9 @@
         <div data-js="TableOfContent" data-selector=".s_table_of_content"/>
         <div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
             <we-button-group string="Position">
-                <we-button title="Left" data-navbar-position="left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
-                <we-button title="Top" data-navbar-position="top"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
-                <we-button title="Right" data-navbar-position="right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
+                <we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-navbar-position="left"/>
+                <we-button class="fa fa-fw fa-long-arrow-up" title="Top" data-navbar-position="top"/>
+                <we-button class="fa fa-fw fa-long-arrow-right" title="Right" data-navbar-position="right"/>
             </we-button-group>
             <we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
         </div>
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
index 9fffe4845a8..2e8be00bfbc 100644
--- a/addons/website/views/snippets/s_tabs.xml
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -84,11 +84,11 @@
             </we-select>
             <we-divider/>
             <we-button-group string="Slide" data-apply-to=".s_tabs_content:first">
-                <we-button title="Slide Left" data-select-class="s_tabs_slide_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
-                <we-button title="Slide Up" data-select-class="s_tabs_slide_up"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
-                <we-button title="Slide Down" data-select-class="s_tabs_slide_down"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
-                <we-button title="Slide Right" data-select-class="s_tabs_slide_right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
-                <we-button title="No Slide Effect" data-select-class=""><i class="fa fa-fw fa-ban"/></we-button>
+                <we-button class="fa fa-fw fa-long-arrow-left" title="Slide Left" data-select-class="s_tabs_slide_left"/>
+                <we-button class="fa fa-fw fa-long-arrow-up" title="Slide Up" data-select-class="s_tabs_slide_up"/>
+                <we-button class="fa fa-fw fa-long-arrow-down" title="Slide Down" data-select-class="s_tabs_slide_down"/>
+                <we-button class="fa fa-fw fa-long-arrow-right" title="Slide Right" data-select-class="s_tabs_slide_right"/>
+                <we-button class="fa fa-fw fa-ban" title="No Slide Effect" data-select-class=""/>
             </we-button-group>
         </div>
     </xpath>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e87127463d8..fd2bda6d0a6 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -179,13 +179,11 @@
 
 <template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
     <xpath expr="//we-button[@data-toggle-bg-image]" position="after">
-        <we-button title="Video"
+        <we-button title="Video" class="fa fa-fw fa-film"
                    data-name="bg_video_toggler_opt"
                    t-att-data-dependencies="images_dependencies"
                    data-toggle-bg-video="true"
-                   data-no-preview="true">
-            <i class="fa fa-fw fa-film"/>
-        </we-button>
+                   data-no-preview="true"/>
     </xpath>
     <xpath expr="//t[@t-set='color_filter_dependencies']" position="after">
         <t t-set="color_filter_dependencies" t-valuef="#{color_filter_dependencies}, bg_video_toggler_opt"/>
@@ -357,9 +355,9 @@
     <!-- H-ALIGN -->
     <div id="so_text_align" data-selector=".s_share, .s_text_highlight">
         <we-button-group string="Alignment">
-            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
+            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
         </we-button-group>
     </div>
 
@@ -374,9 +372,9 @@
 
     <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
         <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
+            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
+            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
         </we-button-group>
     </div>
 
@@ -416,18 +414,10 @@
 
     <div data-js="CarouselItem"
          data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
-        <we-button data-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward">
-            <i class="fa fa-fw fa-angle-left"/>
-        </we-button>
-        <we-button data-slide="right" data-no-preview="true" class="mr-2" data-tooltip="true" title="Move Forward">
-            <i class="fa fa-fw fa-angle-right"/>
-        </we-button>
-        <we-button data-add-slide-item="true" data-no-preview="true" class="o_we_bg_success" data-tooltip="true" title="Add Slide">
-            <i class="fa fa-fw fa-plus"/>
-        </we-button>
-        <we-button data-remove-slide="true" data-no-preview="true" class="o_we_bg_danger" data-tooltip="true" title="Remove Slide">
-            <i class="fa fa-fw fa-minus"/>
-        </we-button>
+        <we-button class="fa fa-fw fa-angle-left" data-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward"/>
+        <we-button class="fa fa-fw fa-angle-right mr-2" data-slide="right" data-no-preview="true" data-tooltip="true" title="Move Forward"/>
+        <we-button class="fa fa-fw fa-plus o_we_bg_success" data-add-slide-item="true" data-no-preview="true" data-tooltip="true" title="Add Slide"/>
+        <we-button class="fa fa-fw fa-minus o_we_bg_danger" data-remove-slide="true" data-no-preview="true" data-tooltip="true" title="Remove Slide"/>
     </div>
 
     <!-- Accordion -->
@@ -1044,8 +1034,7 @@
             </t>
             <we-button-group class="ml-auto">
                 <we-imagepicker title="Image" data-background="" data-button-style="true"/>
-                <we-button title="None" data-background="">
-                    <i class="fa fa-fw fa-ban"/>
+                <we-button class="fa fa-fw fa-ban" title="None" data-background="">
                 </we-button>
             </we-button-group>
         </we-row>
@@ -1303,12 +1292,12 @@
                             data-customize-website-color=""
                             data-color="body"/>
             <we-button-group data-imagepicker="body_bg_image_opt">
-                <we-button title="Image"
-                           data-customize-body-bg-type="'image'"><i class="fa fa-fw fa-camera"/></we-button>
-                <we-button title="Pattern"
-                           data-customize-body-bg-type="'pattern'"><i class="fa fa-fw fa-th"/></we-button>
-                <we-button title="None"
-                           data-customize-body-bg-type="NONE"><i class="fa fa-fw fa-ban"/></we-button>
+                <we-button title="Image" class="fa fa-fw fa-camera"
+                           data-customize-body-bg-type="'image'"/>
+                <we-button title="Pattern" class="fa fa-fw fa-th"
+                           data-customize-body-bg-type="'pattern'"/>
+                <we-button title="None" class="fa fa-fw fa-ban"
+                           data-customize-body-bg-type="NONE"/>
             </we-button-group>
             <!-- Hidden imagepicker enabled by above button-group -->
             <we-imagepicker data-name="body_bg_image_opt"
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 1551a0a36d1..1783430f3ac 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -89,8 +89,8 @@
         </div>
         <div data-selector="#product_detail #o-carousel-product" data-no-check="true">
             <we-button-group string="Thumbnails Position" data-no-preview="true" data-reload="/">
-                <we-button title="Left" data-customize-website-views="website_sale.carousel_product_indicators_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
-                <we-button title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+                <we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-customize-website-views="website_sale.carousel_product_indicators_left"/>
+                <we-button class="fa fa-fw fa-long-arrow-down" title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"/>
             </we-button-group>
         </div>
     </xpath>