Sass/CSS/Angular 1 - Select element same level into ng-class allowed class

Question

<button>
  <span>Search</span>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
</button>

I want to select the span element if fa-spinner is allowed (by default fa-search which is taken) In case the span element is below element i we can do:

HTML :

<button>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
  <span>Search</span>
</button>

CSS :

.fa-spinner {
  font-size: 18px;

  & ~ span {
    padding-left: 10px;
  }
}

How to reproduce the same result on the first HTML example ?

Answer 1

As selecting the previous sibling is not possible in CSS as explained here

Best possible way to use ng-class similar to i for span as shown below:

<button>
    <span  ng-class="$ctrl.pending ? 'left-padding' : ''">Search</span>
    <i class="fa"
    ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
    aria-hidden="true">
    </i>
</button>
//css
span.left-padding 
{
    padding-left: 10px;
}