Trying to Make Mud Stepper dynamically. I have four steps to show. It should display with icon and title. But Its showing title and numbers instead of icon. Do we need to install some specific library to show icons?
<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>(); 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" }); } void NextStep() { if (ActiveStep < Steps.Count - 1) ActiveStep++; // Update icons if needed based on ActiveStep (e.g., change completed icons) UpdateStepIcons(); } void UpdateStepIcons() { for (int i = 0; i < Steps.Count; i++) { if (ActiveStep == i) { Steps[i].Icon = Icons.Material.Filled.Star; // Current } else if (ActiveStep > i) { Steps[i].Icon = Icons.Material.Filled.CheckCircle; // Completed } else { Steps[i].Icon = GetOriginalIcon(i); // Upcoming } } } string GetOriginalIcon(int index) => index == 0 ? Icons.Material.Filled.People : (index == 1 ? Icons.Material.Filled.Person2 : Icons.Material.Filled.Person3); public class StepperStep { public string Title { get; set; } public string Icon { get; set; } // Can be icon name or custom SVG public string Content { get; set; } }}@code{ [Parameter] public int? InitialCallerId { get; set; } [Parameter] public string? InitialTravellerName { get; set; } [Parameter] public int InitialTab { get; set; } = 0;}But its not showing icon on UI. Instead just shows number. Can anyone please help with this?