Icon changes when clicking on a new webpage

I have a vertical menu where people can switch between pages. When I’m on the main screen the icons are:

However, when I click on the ‘soort’ page the icon of partijen changes to:

This is my first time working with html, so I have no idea where to look. The sidebar is in a shared view. The icons are from https://iconify.design/ but they don’t even have this design on their website.

This is the code for the sidebar:

@{
    TempData.Keep();
    string? currentPage = ViewContext.HttpContext.Request.Path;
    var userRole = ViewBag.RolId;
}

<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">

  <div
    class='app-brand demo @((@ViewData["navbarFull"] != null && Convert.ToBoolean(@ViewData["navbarFull"])) ? "d-xl-none" : "")'>
    <a asp-controller="Dashboards" asp-action="Index" class="app-brand-link">
      <span class="app-brand-logo demo">
        <img src="~/img/illustrations/blaadje.png" alt="leaf" style="max-width:25px"/>

      </span>
      <span class="app-brand-text demo menu-text fw-bold ms-2">@TempData.Peek("appName")</span>
    </a>

    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
      <i class="bx bx-chevron-left bx-sm align-middle"></i>
    </a>
  </div>

  <div class="menu-inner-shadow"></div>

  @* ! Full version menu-items *@
  <ul class="menu-inner py-1">
    <!-- Dashboard -->
    <li class='menu-item@(currentPage == "/Dashboard/Index" ? " active" : "")'>
        <a asp-controller="Dashboard" asp-action="Index" class="menu-link">
            <i class="menu-icon tf-icons bx bx-home-circle"></i>
            <div>Dashboard</div>
        </a>
    </li>
    <!-- Partijen -->
    <li class='menu-item@(currentPage == "/Partij/Index" ? " active" : "")'>
        <a asp-controller="Partij" asp-action="Index" class="menu-link">
            <i class="menu-icon tf-icons bx bx-leaf"></i>
            <div>Partijen</div>
        </a>
    </li>
    <!-- Soorten-->
        <li class='menu-item@(currentPage == "/Soort/Index" ? " active" : "")'>
            <a asp-controller="Soort" asp-action="Index" class="menu-link">
                <i class=" menu-icon tf-icons bx bxs-color-fill"></i>
                <div>Soort</div>
            </a>
        </li>
  </ul>

</aside>

Edit: The inspect when being on the ‘Soort’ space shows this:

Can anyone give me a hint or a clue about where or how this went go wrong?