Center icon inside div with label css

I have this span within div

<div>
  <span class="material-symbols-outlined" (click)="call()">
           phone
         </span>
  <span> Phone</span>
</div>

the phone icon is not center align with the text phone

I tried text-align :center also but is is not working, this div has some outer div also if I give margin-top to icon it shifting whole row

>Solution :

You can use flex to align these two spans:

<div style="display:flex; align-items:center">
  <span class="material-symbols-outlined" (click)="call()">
    phone
  </span>
  <span> Phone</span>
</div>

You can write the style separately instead of inline CSS.