I created a tabulator js table which behaves as it should when looking with FireFox at it - when I try it in Chrome, I get a dot after icons I put in a cell.

This is a screenshot of FF (top) and Chrome (bottom) for the same page. I also do not see the . in any of the HTML code:

HTML code from Chrome:

<div class="tabulator-cell" 
     role="gridcell"
     title="" 
     style="width: 42px; 
     height: 42px;">
    <button class="btn btn-sm btn-primary" 
            id="tippy" 
            aria-expanded="false">
        <svg class="svg-inline--fa fa-server fa-w-16" 
             aria-hidden="true" 
             focusable="false" 
             data-prefix="fas" 
             data-icon="server" 
             role="img" 
             xmlns="http://www.w3.org/2000/svg" 
             viewBox="0 0 512 512" 
             data-fa-i2svg="">
            <path fill="currentColor" 
                  d="...">
            </path>
        </svg><!-- <i class="fas fa-server"></i> Font Awesome fontawesome.com -->
    </button>
</div>

I cannot see where the . is coming from. The FF code looks identical. The tabulator code looks like this:

cols = [{formatter: eBtn, cellClick: editClkd, maxWidth: "40"},
        {formatter: pBtn, tooltip: prntToolTip, maxWidth: "40"},
        {formatter: tippyBtn, maxWidth: "42",}]

var table = new Tabulator("#testtable", {height:"1210px",
                                         layout: "fitColumns",
                                         resizableColumns: false,
                                         pagination: "local",
                                         columns: cols});

let tippyBtn = function (cell) {
    let row = cell.getRow()._row.data;
    return `<button class="btn btn-sm btn-primary" id="tippy">
                <i class="fas fa-server"></i>
            </button>`;
}