MudBlazor中MudStepper图标不显示问题求助

无需额外安装图标库 #

MudBlazor本身已集成Material Icons，你遇到的图标不显示问题和图标库安装无关，核心是代码逻辑与组件渲染的问题，具体修复点如下：

1. 合并重复的@code块 #

你的代码存在两个独立的@code块，会导致变量作用域混乱，需将所有C#逻辑合并到同一个@code块中。

2. 手动触发组件重新渲染 #

当在UpdateStepIcons方法中修改Steps集合内的项属性时，Blazor无法自动感知变化，需调用StateHasChanged()触发组件重新渲染，更新图标显示：

void UpdateStepIcons()
{
    for (int i = 0; i < Steps.Count; i++)
    {
        if (ActiveStep == i)
        {
            Steps[i].Icon = Icons.Material.Filled.Star; // 当前步骤图标
        }
        else if (ActiveStep > i)
        {
            Steps[i].Icon = Icons.Material.Filled.CheckCircle; // 已完成步骤图标
        }
        else
        {
            Steps[i].Icon = GetOriginalIcon(i); // 未开始步骤图标
        }
    }
    StateHasChanged(); // 新增该行触发渲染更新
}

3. 确认命名空间引用正确 #

确保项目的_Imports.razor文件中已添加MudBlazor相关命名空间：

@using MudBlazor
@using MudBlazor.Icons

4. 补充第四个步骤（可选） #

你提到计划展示4个步骤，但当前代码仅添加了3个，可在OnInitialized方法中补充：

Steps.Add(new StepperStep { Title = "Step Four", Icon = Icons.Material.Filled.Settings, Content = "Content for step 4" });

修复后的完整代码 #

<MudStepper ActiveStep="ActiveStep">
    @foreach (var step in Steps)
    {
        <MudStep Icon="@step.Icon" Title="@step.Title">
            @step.Content
        </MudStep>
    }
</MudStepper>

<MudButton OnClick="NextStep" Variant="Variant.Filled">Next</MudButton>

@code {
    int ActiveStep = 0;
    List<StepperStep> Steps = new List<StepperStep>();

    [Parameter] public int? InitialCallerId { get; set; }
    [Parameter] public string? InitialTravellerName { get; set; }
    [Parameter] public int InitialTab { get; set; } = 0;

    protected override void OnInitialized()
    {
        Steps.Add(new StepperStep { Title = "Step One", Icon = Icons.Material.Filled.Person, Content = "Content for step 1" });
        Steps.Add(new StepperStep { Title = "Step Two", Icon = Icons.Material.Filled.PermCameraMic, Content = "Content for step 2" });
        Steps.Add(new StepperStep { Title = "Step Three", Icon = Icons.Material.Filled.AccessAlarm, Content = "Content for step 3" });
        Steps.Add(new StepperStep { Title = "Step Four", Icon = Icons.Material.Filled.Settings, Content = "Content for step 4" });
    }

    void NextStep()
    {
        if (ActiveStep < Steps.Count - 1)
            ActiveStep++;
        UpdateStepIcons();
    }

    void UpdateStepIcons()
    {
        for (int i = 0; i < Steps.Count; i++)
        {
            if (ActiveStep == i)
            {
                Steps[i].Icon = Icons.Material.Filled.Star;
            }
            else if (ActiveStep > i)
            {
                Steps[i].Icon = Icons.Material.Filled.CheckCircle;
            }
            else
            {
                Steps[i].Icon = GetOriginalIcon(i);
            }
        }
        StateHasChanged();
    }

    string GetOriginalIcon(int index) => index switch
    {
        0 => Icons.Material.Filled.People,
        1 => Icons.Material.Filled.Person2,
        2 => Icons.Material.Filled.Person3,
        3 => Icons.Material.Filled.Settings,
        _ => Icons.Material.Filled.Help
    };

    public class StepperStep
    {
        public string Title { get; set; }
        public string Icon { get; set; }
        public string Content { get; set; }
    }
}

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