SVG (bootstrap)

Приклад SVG-картинки прямо у кнопці:

<form id="formEmail">
    <input id="hID" name="h_id" type="hidden" value="{{ HMC }}{{ STN }}">
    <div class="input-group">
        <input id="tEmail" name="t_email" type="text" class="form-control form-control-sm" value="{% if ROW.email %}{{ ROW.email }}{% endif %}" autocomplete="off" disabled>
        <button id="bEditEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_edit('Email')">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"></path>
            </svg>
        </button>
        <button id="bCancelEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_cancel('Email')" style="display:none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"></path>
                <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"></path>
            </svg>
        </button>
        <button id="bSaveEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_save('Email')" disabled>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
            </svg>
        </button>
    </div>
</form>

Але якщо одні й ті ж картинки будуть використовуватись декілька раз, є сенс не дублювати їх код (<path>), а записати окремо, використовуючі в кнопках їх ідентифікатори:

<svg xmlns="http://www.w3.org/2000/svg" class="d-none" viewBox="0 0 16 16">
    <symbol id="bi-edit">{# bi-pencil #}
        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"></path>
    </symbol>
    <symbol id="bi-skip">{# bi-arrow-repeat #}
        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"></path>
        <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"></path>
    </symbol>
    <symbol id="bi-set">{# bi-check-lg #}
        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
    </symbol>
</svg>

<form id="formEmail">
    <input id="hID" name="h_id" type="hidden" value="{{ HMC }}{{ STN }}">
    <div class="input-group">
        <input id="tEmail" name="t_email" type="text" class="form-control form-control-sm" value="{% if ROW.email %}{{ ROW.email }}{% endif %}" autocomplete="off" disabled>
        <button id="bEditEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_edit('Email')" title="Редагувати">
            <svg width="16" height="16" class="bi bi-pencil" fill="currentColor">
                <use xlink:href="#bi-edit" />
            </svg>
        </button>
        <button id="bCancelEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_cancel('Email')" style="display:none;" title="Відмінити">
            <svg width="16" height="16" class="bi bi-arrow-repeat" fill="currentColor">
                <use xlink:href="#bi-skip" />
            </svg>
        </button>
        <button id="bSaveEmail" class="btn btn-sm btn-outline-secondary" type="button" onclick="do_save('Email')" disabled title="Зберегти">
            <svg width="16" height="16" class="bi bi-check-lg" fill="currentColor">
                <use xlink:href="#bi-set" />
            </svg>
        </button>
    </div>
</form>