Blazor Server中Font Awesome图标初始加载后无法更新问题

我在.NET 8 Core/Blazor Server项目里遇到Font Awesome图标同步异常：初始加载时<i>标签会被正常替换为SVG图标；但导航或数据更新后，SVG图标无法同步更换——点击卡片的View按钮后，标题和描述已更新，图标却仍显示初始的工具箱样式，未切换为应显示的齿轮样式。

已完成的排查：

• 参考过三篇相关文档，未解决问题
• 已提交官方工单确认，项目中使用的SyncFusion SfCard组件无问题
• 使用的是Font Awesome 6.5.1版本的all.min.js

部分配置代码 #

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="css/fontawesome/all.min.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
@*     <link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" /> *@
    <link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/fluent.css" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <script src="js/localStorage.js"></script>
    <script src="js/logoutOnly.js"></script>
    <script src="js/fontawesome/all.min.js"></script>
</head>

问题截图 #

初始加载图标正常：

点击后图标未更新：

图标代码：

页面组件代码 #

<div class="container">
    <div class="row">
        @foreach (MenuItemInfoModel? item in FilteredMenuData)
        {
            <div class="col-md-3">
                <SfCard @ref="sfCard" CssClass="card mb-3">
                    <CardHeader Title="@item.Name">
                    </CardHeader>
                    <CardContent>
                        <i class="@item.IconTxt fa-2x" data-prefix="fas"></i>
                        @item.IconTxt
                   @*      <SfIcon IconCss="@item.IconTxt" Size="Syncfusion.Blazor.Buttons.IconSize.Medium"></SfIcon>
@* @*                         <SfIcon Name="@GetIconName(item.IconTxt ?? "Home")" Size="Syncfusion.Blazor.Buttons.IconSize.Large"></SfIcon> *@ 
                        @item.DescriptionTxt
                    </CardContent>
                    <CardFooter>
                        <CardFooterContent>
                            <SfButton CssClass="e-btn e-outline e-primary" Content="View" @onclick="(args) => onToggleClick(args, item)">
                            </SfButton>
                        </CardFooterContent>
                    </CardFooter>
                </SfCard>
            </div>
        }
    </div>
</div>

请问我还遗漏了什么配置或处理方式？

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