diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/BreadcrumbItem.cs b/framework/src/Volo.Abp.BlazoriseUI/BreadcrumbItem.cs
similarity index 55%
rename from framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/BreadcrumbItem.cs
rename to framework/src/Volo.Abp.BlazoriseUI/BreadcrumbItem.cs
index 03943f47d7..2f918d6c55 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/BreadcrumbItem.cs
+++ b/framework/src/Volo.Abp.BlazoriseUI/BreadcrumbItem.cs
@@ -1,14 +1,16 @@
-namespace Volo.Abp.AspNetCore.Components.WebAssembly
+using Blazorise;
+
+namespace Volo.Abp.BlazoriseUI
 {
     public class BreadcrumbItem
     {
         public string Text { get; set; }
 
-        public string Icon { get; set; }
+        public IconName? Icon { get; set; }
 
         public string Url { get; set; }
 
-        public BreadcrumbItem(string text, string url = null, string icon = null)
+        public BreadcrumbItem(string text, string url = null, IconName? icon = null)
         {
             Text = text;
             Url = url;
diff --git a/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor b/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor
index 5931ff1c95..d4870e6f59 100644
--- a/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor
+++ b/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor
@@ -9,16 +9,18 @@
                 @if (BreadcrumbShowHome)
                 {
                     <BreadcrumbItem>
-                        <BreadcrumbLink To="/"><i class="fa fa-home"></i></BreadcrumbLink>
+                        <BreadcrumbLink To="/">
+                            <Icon Name="IconName.Home" />
+                        </BreadcrumbLink>
                     </BreadcrumbItem>
                 }
                 @foreach (var item in BreadcrumbItems)
                 {
                     <BreadcrumbItem>
                         <BreadcrumbLink To="@item.Url">
-                            @if (!string.IsNullOrEmpty(item.Icon))
+                            @if (item.Icon != null)
                             {
-                                <i class="fa @item.Icon"></i>
+                                <Icon Name="@item.Icon" />
                             }
                             @item.Text
                         </BreadcrumbLink>
diff --git a/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor.cs b/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor.cs
index c3b75712ef..90e4b0f0c7 100644
--- a/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor.cs
+++ b/framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor.cs
@@ -1,6 +1,6 @@
 using System.Collections.Generic;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
-using Volo.Abp.AspNetCore.Components.WebAssembly;
 
 namespace Volo.Abp.BlazoriseUI.Components
 {
@@ -18,17 +18,12 @@ namespace Volo.Abp.BlazoriseUI.Components
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        protected List<BreadcrumbItem> BreadcrumbItems { get; set; }
+        [Parameter]
+        public List<BreadcrumbItem> BreadcrumbItems { get; set; }
 
         public PageHeader()
         {
             BreadcrumbItems = new List<BreadcrumbItem>();
         }
-
-        public void AddBreadcrumbItem(string text, string url = null, string icon = null)
-        {
-            BreadcrumbItems.Add(new BreadcrumbItem(text, url, icon));
-            StateHasChanged();
-        }
     }
 }