diff --git a/addons/event/__manifest__.py b/addons/event/__manifest__.py
index db8c29a6b3e..f33b5a6f7bd 100644
--- a/addons/event/__manifest__.py
+++ b/addons/event/__manifest__.py
@@ -49,13 +49,13 @@ Key Features
     'assets': {
         'web.assets_backend': [
             'event/static/src/scss/event.scss',
-            'event/static/src/js/field_icon_selection.js',
+            'event/static/src/icon_selection_field/icon_selection_field.js',
         ],
         'web.assets_common': [
             'event/static/src/js/tours/**/*',
         ],
         'web.assets_qweb': [
-            'event/static/src/xml/**/*',
+            'event/static/src/**/*',
         ],
         'web.report_assets_common': [
             '/event/static/src/scss/event_foldable_badge_report.scss',
diff --git a/addons/event/static/src/icon_selection_field/icon_selection_field.js b/addons/event/static/src/icon_selection_field/icon_selection_field.js
new file mode 100644
index 00000000000..ebb9daca39d
--- /dev/null
+++ b/addons/event/static/src/icon_selection_field/icon_selection_field.js
@@ -0,0 +1,30 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+
+const { Component } = owl;
+
+export class IconSelectionField extends Component {
+    get icon() {
+        return this.props.icons[this.props.value];
+    }
+    get title() {
+        return this.props.value.charAt(0).toUpperCase() + this.props.value.slice(1);
+    }
+}
+IconSelectionField.template = "event.IconSelectionField";
+IconSelectionField.props = {
+    ...standardFieldProps,
+    icons: Object,
+};
+
+IconSelectionField.displayName = _lt("Icon Selection");
+IconSelectionField.supportedTypes = ["char", "text", "selection"];
+
+IconSelectionField.extractProps = ({ attrs }) => ({
+    icons: attrs.options,
+});
+
+registry.category("fields").add("event_icon_selection", IconSelectionField);
diff --git a/addons/event/static/src/icon_selection_field/icon_selection_field.xml b/addons/event/static/src/icon_selection_field/icon_selection_field.xml
new file mode 100644
index 00000000000..70db8d9ed4e
--- /dev/null
+++ b/addons/event/static/src/icon_selection_field/icon_selection_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="event.IconSelectionField" owl="1">
+        <i t-att-class="icon" t-att-data-tooltip="title"/>
+    </t>
+
+</templates>
diff --git a/addons/event/static/src/js/field_icon_selection.js b/addons/event/static/src/js/field_icon_selection.js
deleted file mode 100644
index 95740ea62d9..00000000000
--- a/addons/event/static/src/js/field_icon_selection.js
+++ /dev/null
@@ -1,29 +0,0 @@
-odoo.define('event.field_icon_selection', function (require) {
-"use strict";
-
-var core = require('web.core');
-var registry = require('web.field_registry');
-var AbstractField = require('web.AbstractField');
-var QWeb = core.qweb;
-
-var IconSelection = AbstractField.extend({
-    supportedFieldTypes: ['char', 'text', 'selection'],
-
-    /**
-    * @override
-    * @private
-    */
-    _render: function () {
-        this._super.apply(this, arguments);
-        this.icon = this.nodeOptions[this.value];
-        this.title = this.value.charAt(0).toUpperCase() + this.value.slice(1);
-        this.$el.empty().append(QWeb.render('event.IconSelection', {'widget': this}));
-    },
-
-});
-
-registry.add('icon_selection', IconSelection);
-
-return IconSelection;
-
-});
diff --git a/addons/event/static/src/xml/field_icon_selection.xml b/addons/event/static/src/xml/field_icon_selection.xml
deleted file mode 100644
index 399be360311..00000000000
--- a/addons/event/static/src/xml/field_icon_selection.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates xml:space="preserve">
-    <t t-name="event.IconSelection">
-        <i t-att-class="widget.icon" t-att-title="widget.title"/>
-    </t>
-</templates>
diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index 2c20ebd6fb5..3921777814e 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -84,7 +84,7 @@
                                     <field name="interval_type"/>
                                     <field name="scheduled_date" groups="base.group_no_one"/>
                                     <field name="mail_count_done"/>
-                                    <field name="mail_state" widget="icon_selection" string=" "
+                                    <field name="mail_state" widget="event_icon_selection" string=" " nolabel="1"
                                         options="{'sent': 'fa fa-check', 'scheduled': 'fa fa-hourglass-half', 'running': 'fa fa-cogs'}"/>
                                 </tree>
                             </field>
diff --git a/addons/event/views/event_mail_views.xml b/addons/event/views/event_mail_views.xml
index babcf0672a7..cf6a1907eba 100644
--- a/addons/event/views/event_mail_views.xml
+++ b/addons/event/views/event_mail_views.xml
@@ -53,7 +53,7 @@
                 <field name="template_ref" options="{'model_field': 'template_model_id', 'no_quick_create': True}" context="{'filter_template_on_event': True, 'default_model': 'event.registration'}"/>
                 <field name="scheduled_date"/>
                 <field name="mail_count_done"/>
-                <field name="mail_state" widget="icon_selection" string=" "
+                <field name="mail_state" widget="event_icon_selection" string=" " nolabel="1"
                     options="{'sent': 'fa fa-check', 'scheduled': 'fa fa-hourglass-half', 'running': 'fa fa-cogs'}"/>
             </tree>
         </field>