Search code examples
blazormudblazor

How can I put an icon in a MudNavLink that will show up correctly at the end of the link?


How can I put an icon in a MudNavLink that will show up correctly at the end of the link? It looks like the API currently only supports icons at the front, and manually adding a MudIcon does not style correctly.

example

<MudNavMenu>
    <MudNavLink Href="#" Icon="@Icons.Material.Filled.OpenInNew">Correct placement on left</MudNavLink>
    <MudNavLink Href="#"><MudIcon Icon="@Icons.Material.Filled.OpenInNew" /> Incorrect placement on left</MudNavLink>
    <MudNavLink Href="#">Correct placement on right <MudIcon Icon="@Icons.Material.Filled.OpenInNew" /></MudNavLink>
</MudNavMenu>

https://try.mudblazor.com/snippet/GuQHYTwGqQgUbeXG


Solution

  • You can use the CSS utilities that are available.

    <MudNavLink Href="#">absolute
      <MudIcon Class="absolute" Icon="@Icons.Material.Filled.OpenInNew" />
    </MudNavLink>
    
    

    Snippet