Dynamic icon in class icon with tag i

1

Hi All,

I have a list and item have icon left like that:

<div class="list" style="background-color: transparent !important;background: no-repeat center center fixed;" >
         <div class="item item-icon-left layout1" ng-click="gotoS('tab.detail')" >
             <i class="icon homeIcon"></i>
             {{$root.themeConfig.titleOfHome}}
         </div>
     </div>

because my homeIcon is dynamic icon , so i inspect my app see css item and i custome by css like this :slightly_smiling:

.list .item.item-icon-left.layout1 .icon.homeIcon {
        background-repeat: no-repeat;
        background-position: 50%;
        height: 70%;
        background-size: 30px 30px !important;
        background-image: url("{{$root.tabConfig.tabHome.iconSrc}}");
        background-size:contain;
    }

But nothing happend, my icon not change, with tab icon i can customize but item icon in i tag, i can’t.

Please help me solve this case, thanks!