Пользовательские иконки JQuery UI гармошки загружаются, но не появляются в div

У меня возникла проблема, когда мои пользовательские значки в моем аккордеоне появляются на странице, они загружаются, они переключаются onclick из

<span class="ui-accordion-header-icon ui-icon iconClosed"></span> to '<span class="ui-accordion-header-icon ui-icon iconOpen"></span>'

они появляются в devtools, но диапазон показывает их как 0 x 0 px на фактической странице. Если я установил фоновое изображение в mNavigation, стрелка загрузится нормально. Вот мой соответствующий код

CSS

   /*--------------jquery custom icons--------------*/
.iconClosed {
    background-image: url('/_img/mobile/mrightArrow.png') !important;
    width: 35px;
    height: 15px;
    background-position: 98% 2px;
    background-repeat: no-repeat;
}

.iconOpen {
    background-image: url('/_img/mobile/mdownArrow.png') !important;
    width: 15px;
    height: 35px;
    background-position: 98% 2px;
    background-repeat: no-repeat;
}  

JS

$(function() {
var icons = {
  header: "iconClosed",
  activeHeader: "iconOpen"
};
$("#accordion").accordion({
    icons: icons,
    active: false,
    collapsible: true,
    heightStyle: "content"
});

HTML

<div class="mNavigation">  
            <ul  id="accordion">
                <li>
                    <h3><a href="#">Stories</a></h3>
                        <div class ="mNavigation" id = "Foo"></div>
                </li>
                <li>
                    <h3><a href="#">Barristers</a></h3>
                        <div class ="mNavigation" id = "Foo"></div>
                </li>
                <li>
                    <h3><a href="#">Dancing in the Dark</a></h3>
                        <div class ="mNavigation" id="Foo"></div>
                </li>
                <li>
                    <h3><a href="#">Avocado</a></h3>
                        <div class ="mNavigation" id="Foo"></div>
                </li>
            </ul>
        </div>