Account

By default, Odoo indicates required fields in form views using an asterisk (*) next to the label. This guide shows you how to replace the asterisk with a Font Awesome icon, creating a more intuitive user interface.

1. Create a Javascript override component FormLabel

your_module/static/src/xml/form_label_required_icon.js

/** @odoo-module **/
import { FormLabel } from "@web/views/form/form_label";
import { patch } from "@web/core/utils/patch";

patch(FormLabel.prototype, {
    /**
     * @override
     */
    setup() {
        super.setup();
        if (this.props.fieldInfo.required  && !this.props.record.data[this.props.fieldName]) {
            this.props.field_required = true
        }
    }
});

2. Create a Custom Template to Extend web.FormLabel

Create a new XML file in your custom module, for example:
your_module/static/src/xml/form_label_required_icon.xml

<templates id="template" xml:space="preserve">
    <t t-name="form_label_custom" t-inherit="web.FormLabel" t-inherit-mode="extension">
        <xpath expr="//label" position="inside">
            <t t-if="props.field_required">
                <span class="required-field-marker" style="color: red; margin-left: 4px;">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                </span>
            </t>
        </xpath>
    </t>
</templates>

3. Add the XML to Your Module's manifest.py

'assets': {
    'web.assets_backend': [
        'your_module/static/src/xml/form_label_required_icon.js',
        'your_module/static/src/xml/form_label_required_icon.xml',
    ],
},

4. Result