set text after icon on mat-option using Angular Material

Question

I need to put numbers after the icon on a drop-down menu. I'm using Angular Material v15. But the view does not appear in the same order that I placed it. How do I fix this issue?

my code in mat-option is as follows:

<mat-option>
<span class="icon-box">
    <i class="material-icons">seat_empty</i>
</span>
<span class="icon-box"> 11 </span>
<span class="icon-box">
    <i class="material-icons">seat</i>
</span>
<span class="icon-box"> 12 </span>
</span>
</mat-option>

.icon-box{width:24px;height:24px}

it appears as follows:

What I need is to display numbers after each icon.