JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<p>When clicking this button, microphone icon moves to the left by ~1px:</p>

<div id="btn1" class="btn"><i class="icon-microphone"></i></div>

<p>Workaround (just adding "margin-left: 1px" to the icon):</p>

<div id="btn2" class="btn"><i class="icon-microphone"></i></div>

CSS

.btn {
    width: 48px;
    min-height: 48px;
    border-radius: 50%;
    background: #854eb3;
    text-align: center;
    line-height: 48px;
    font-size: 30px;
    color: white;
}

.margin-1px-fix {
    margin-left: 1px;
}

JavaScript

$(function() {
    $("#btn1").click(changeIcon);
    $("#btn2").click(changeIconFix);
});

function changeIcon() {
    $(this).children().toggleClass("icon-microphone icon-microphone-off");
}

function changeIconFix() {
    $(this).children().toggleClass("icon-microphone icon-microphone-off      margin-1px-fix");
}