When working with Angular and Bootstrap to develop a navigation bar, I encountered an issue with aligning a user icon in the navbar. The picture below shows the problem that arises when trying to center align the user icon among other links in the navbar. Interestingly, if I use text instead (such as 'My Account'), the alignment works perfectly. How can this issue be fixed so that the user icon is also centered aligned just like the rest of the links?
https://i.sstatic.net/1jFBI.png
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand d-flex w-50 me-auto">
<img
src="assets/images/myImage.png"
alt="my-image"
loading="lazy"
class="logo"
/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto w-100 justify-content-end">
<!-- <li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
-->
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img
src="assets/images/user.png"
alt="user-logo"
loading="lazy"
class="logo"
/>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Sign Up</a></li>
<!-- <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Item</a></li>
-->
</ul>
</li>
</ul>
</div>
</div>
</nav>