In my angular application I have some icons and my requirement is to add the numbers below the icons so I have added the class within the span tag to increment the numbers .but the numbers has to add based on the icons.

.component.html

<div class="toggleButton col-md-4" >
            <label class="rating-switch" id="toggleSwitch">
              <input class="rating-checkbox" type="checkbox" [checked]="toggleState" (change)="onToggleClicked($event)" >
              <div class="slide round" >
          </div>
            </label>
            <span class="no-rating-switch" >No Rating</span>
         </div>
<div class="container">
<span class="icon-number" ></span>
<i (click)="onIconClick(icon)" class="iconStyle" [ngClass]="icon.class"
       [style.color]="icon.active === true ? '#FF0000' : '#ffffff'" *ngFor="let icon of iconsArr">
    </i>
      </div>

In i tag there are total 10 icons are there and those I have added in .ts file and added styles toiconStyle class, and also for the icon-number class in span tag above I have added to add the numbers increment in css.

.component.css

.icon-number{
    position: relative;
    left: 22px;
    top: 20px;
  }
 .icon-number:after{
    content: counter(number);
    counter-increment: number;
  }

.component.ts

 toggleState = true;
iconsArr = [
    { id: 1, class: "icon-1",active: false },
    { id: 2, class: "icon-2",active: false },
    { id: 3, class: "icon-3" ,active: false},
    { id: 4, class: "icon-4" ,active: false},
    { id: 5, class: "icon-5" ,active: false},
   ]

onIconClick(icon: any) {
    let iconToEdit = this.iconsArr.find(ico => ico.id === icon.id);
    if (iconToEdit && !iconToEdit.active) {
      this.iconsArr.forEach(i => i.active = false);
      iconToEdit.active = !iconToEdit.active;
      this.markToggleAsActive();
    } else {
      this.iconsArr.forEach(i => i.active = false);
    }
  }

  onToggleClicked(event: any) {
    this.toggleState = event.target.checked;
    this.markIconsAsInactive();
  }

  markIconsAsInactive() {
    if (this.toggleState) {
      this.iconsArr.forEach(icon => icon.active = false);
    }
  }

  markToggleAsActive() {
    this.toggleState = !this.iconsArr.find(icon => icon.active);
  }

In the above code I have to add the numbers based on the number of icons and also when we click on icons the number below the icons should be bold.

Can anyone help me on this