如何在MudNavLink组件末尾正确放置图标？

默认情况下，MudNavLink的Icon属性仅支持将图标放置在文本左侧，手动嵌套MudIcon组件会出现样式错位（比如间距不对、对齐异常）。以下是两种可靠的解决方法：

方法一：利用内置弹性布局类 #

通过MudBlazor的内置CSS工具类，快速实现文本与图标两端对齐的布局，同时保持原生组件的样式一致性：

<MudNavMenu>
    <MudNavLink Href="#" Class="d-flex justify-content-between align-items-center">
        右侧图标（样式匹配原生）
        <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Class="ms-2" />
    </MudNavLink>
</MudNavMenu>

• d-flex：将导航链接内容转为弹性布局
• justify-content-between：让文本和图标分别占据左右两端
• align-items-center：确保文本与图标垂直居中对齐
• ms-2：给图标添加左侧间距，和原生Icon属性的间距保持一致

方法二：自定义CSS类（适合批量复用） #

如果需要在多个导航链接中复用该样式，可以定义全局CSS类：

.navlink-icon-right .mud-nav-link-content {
    justify-content: space-between;
    align-items: center;
}
.navlink-icon-right .mud-icon {
    margin-left: 0.5rem; /* 匹配原生图标间距 */
}

然后在组件中使用：

<MudNavMenu>
    <MudNavLink Href="#" Class="navlink-icon-right">
        右侧图标（自定义全局样式）
        <MudIcon Icon="@Icons.Material.Filled.OpenInNew" />
    </MudNavLink>
</MudNavMenu>

这种方法可以统一管理所有需要右侧图标的导航链接样式，避免重复编写工具类。

内容的提问来源于stack exchange，提问作者Homer