Custom icon color not working for one icon, but is for another

ionic-v1
1

In my tabs headers I have successfully changed the colors of the icons:

.customColor1 {
  color:#387ef5;
  !important;
}

.customColor2 {
  color:#000000;
  !important;
}

<ion-tab id="mapTab" title="Map" class="icon" icon-off="ion-ios-world customColor2" icon-on="ion-ios-world customColor1" href="#/tab/map">
    <ion-nav-view name="tab-map"></ion-nav-view>
  </ion-tab>

However, in one of the tabs that does an ng-repeat=“item in items” I am using the following to change the color of the right arrow (that links to sub-pages) and the color is not working:

<i class="icon ion-chevron-right icon-accessory customColor1">

It doesn’t matter if I move ‘customColor1’ to before the other class definitions…the color simply stays the same default light grey.

The only way to get it work was to do this:

<i class="icon ion-chevron-right icon-accessory" style="color:#387ef5">