Changing the design and shape of all save and discard buttons

Question

I need to change all save and discard buttons, not just at the style level (which is easy with CSS), but I want to replace them with something completely custom. I've tried everything, but I haven't been able to achieve it.

From this, I created a new module and added several options, but none of them work.

 manifest file:

{
    "name": "UI-WFC",
    "version": "1.0",
    "author": "Team WFC - SEB",
    "description": """ 
        Module to modify the design of the UI
    """,
    "website": "",
    "category": "Hidden",
    "depends": ["base", "web"],
    "data": ["views/assets.xml"],
    "assets": {
        "web.assets_backend": [
            "ui_wfc/static/src/css/style.css",
            "ui_wfc/static/src/views/main_buttons.xml",
        ],
    },
    "i18n": [],
    "auto_install": False,
    "installable": True,
    "license": "LGPL-3",
}

Option 1:

assets.xml

<odoo>
    <template id="custom_form_status_indicator">
        <xpath expr="//div[@class='o_form_status_indicator_buttons']" position="replace">
            <button
                type="button"
                class="o_custom_save_button btn btn-primary px-1 py-0 lh-sm"
                data-hotkey="s"
                t-on-click.stop="save"
                data-tooltip="Guardar manualmente"
                aria-label="Guardar manualmente"
                t-ref="save">
                <i class="fa fa-save fa-fw" /> Guardar </button>
            <button
                type="button"
                class="o_custom_cancel_button btn btn-secondary px-1 py-0 lh-sm"
                data-hotkey="j"
                t-on-click.stop="discard"
                data-tooltip="Descartar cambios"
                aria-label="Descartar cambios">
                <i class="fa fa-times fa-fw" /> Cancelar </button>
        </xpath>
    </template>
</odoo>

Option 2:

main_buttons.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="ui.custom.FormStatusIndicator" t-extend="web.FormStatusIndicator">
        <t t-jquery="div.o_form_status_indicator" t-operation="replace">
            <div class="o_form_status_indicator_buttons d-flex"
                t-att-class="{ invisible: !(props.model.root.isNew or displayButtons) }">
                <button
                    type="button"
                    class="o_form_button_save btn btn-light px-1 py-0 lh-sm"
                    data-hotkey="s"
                    t-on-click.stop="save"
                    data-tooltip="Save manually"
                    aria-label="Save manually"
                    t-ref="save">HELLO </button>
                <button
                    type="button"
                    class="o_form_button_cancel btn btn-light px-1 py-0 lh-sm"
                    data-hotkey="j"
                    t-on-click.stop="discard"
                    data-tooltip="Discard changes"
                    aria-label="Discard changes">
                    <i class="fa fa-undo fa-fw" />
                </button>
            </div>
            <span
                t-if="!props.model.root.isNew and indicatorMode === 'invalid'"
                class="text-danger small ms-2"
                data-tooltip="Unable to save. Correct the issue or discard changes">HELLO </span>

        </t>
    </t>
</templates>