Is it possible to use icons next to radio buttons in odoo 12

Question

I want to put in my form multiple radio boxes each one has a descriptif icon next to it . Is it possible to do it with odoo forms if so how can accomplish it.

Answer 1

you need to use js to attain this. firstly find each node of your radio, for example, I have a DOM like this(please use browser dev tools).

<div class="o_field_radio o_vertical o_field_widget in_out" name="in_out" style="width:70px;">
    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio7_I">
        <label class="o_form_label" for="radio7_I">Import</label>
    </div>

    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" data-index="1" data-value="O" id="radio7_O">
        <label class="o_form_label" for="radio7_O">Outgoing</label>
    </div>
</div>

var icon1 = "<span class='glyphicon glyphicon-ok'>";
var icon2 = "<span class='glyphicon glyphicon-remove'>";
// there are icons in bootstrap:
// https://getbootstrap.com/docs/3.3/components/#glyphicons 
var first_node = $('div.o_radio_item input[data-value="I"]');
var second_node = $('div.o_radio_item input[data-value="O"]');

first_node.before(icon1);
second_node.before(icon2);

then insert this js code in your template.

result