MatBlazor - Position of down arrow is not correct in MatNavMenu

Question

I am using MatBlazor for my Blazor Server Side project. I created MatNavMenu but in sub menu the positioning of arrow is not correct.

Please see the positioning of arrow, it is a bit down not centered. Here is the code I am using

<MatNavMenu>
<MatNavSubMenu>
    <MatNavItem><MatIcon Icon="dashboard"></MatIcon>&nbsp; Dashboard</MatNavItem>
    <MatNavSubMenuHeader>
        <MatNavItem AllowSelection="false"><MatIcon Icon="location_city"></MatIcon>&nbsp; City Management</MatNavItem>
    </MatNavSubMenuHeader>
    <MatNavSubMenuList>
        <MatNavItem Href="#"><MatIcon Icon="list"></MatIcon>&nbsp; Cites</MatNavItem>
        <MatNavItem Href="/City/AddNew"><MatIcon Icon="add"></MatIcon>&nbsp; Add New</MatNavItem>
    </MatNavSubMenuList>
</MatNavSubMenu>
</MatNavMenu>

Any help will be highly appriciated.

Thank you

Answer 1

I just had the same problem and what is happening here is a style from another package is interfering in matblazor's style

As you can see in this gif, the problem is that another library is adding line-height to the body and making it go down a little.

To solve this you can reset the value with line-height: normal;