更改字体图标（真棒字体）在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");
    }
}