Changing font icon(font awesome) does not work in IE

Question

I have a sliding pane in my html. I am using an icon that is pointing left to show that the pane is collapsible. As soon as the user clicks the icon, I want to collapse the window and change the icon so it is pointing to right to show that it is expandable. My code works fine in chrome but the icon does not point to right after the click in IE. I am currently using IE 11. Any ideas on how I can fix this?

    <div class="openClose" id="openClose">
        <div class="leftPanelClose">
            <a href="javascript:collapseExpand()"><i class="fa fa-angle-double-left" id="icon"</i></a>
        </div>
    </div>

function collapseExpand(){
    var ic = document.getElementById("icon");

    if (left.style.display=="block")
    {
    /*collapse pane*/
    ic.classList.remove("class", "fa-angle-double-left");
    ic.classList.add("class", "fa-angle-double-right");
    }
    else
    {
    /*expand pane*/
    ic.classList.remove("class", "fa-angle-double-right");
    ic.classList.add("class", "fa-angle-double-left");
    }
}

Answer 1

Did not need "class" argument when adding or removing classes from the icon.

    <div class="openClose" id="openClose">
        <div class="leftPanelClose">
            <a href="javascript:collapseExpand()"><i class="fa fa-angle-double-left" id="icon"</i></a>
        </div>
    </div>

function collapseExpand(){
    var ic = document.getElementById("icon");

    if (left.style.display=="block")
    {
    /*collapse pane*/
    ic.classList.remove("fa-angle-double-left");
    ic.classList.add("fa-angle-double-right");
    }
    else
    {
    /*expand pane*/
    ic.classList.remove("fa-angle-double-right");
    ic.classList.add("fa-angle-double-left");
    }
}