diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/ButtonSettings.cs b/Havit.Blazor.Components.Web.Bootstrap/Buttons/ButtonSettings.cs
index fdd498d1..af6db61e 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/ButtonSettings.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/ButtonSettings.cs
@@ -15,6 +15,11 @@ public record ButtonSettings
 	/// </summary>
 	public string CssClass { get; set; }
 
+	/// <summary>
+	/// CSS class to be rendered with the button icon.
+	/// </summary>
+	public string IconCssClass { get; set; }
+
 	/// <summary>
 	/// Icon to be rendered with the button.
 	/// </summary>
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor
index 5058121b..e24423b6 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor
+++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor
@@ -23,7 +23,7 @@
             }
             else if (this.IconEffective is not null)
             {
-                <HxIcon Icon="this.IconEffective" CssClass="hx-button-icon" />
+                <HxIcon Icon="this.IconEffective" CssClass="@this.IconCssClassEffective" />
             }
 
             @if (!String.IsNullOrEmpty(this.Text) || (ChildContent != null))
@@ -48,7 +48,7 @@
             }
             else if (this.IconEffective is not null)
             {
-                <HxIcon Icon="this.IconEffective" />
+                <HxIcon Icon="this.IconEffective" CssClass="@this.IconCssClassEffective" />
             }
         }
     </button>
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.cs
index fba82578..a20917ca 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.cs
@@ -95,6 +95,12 @@ static HxButton()
 	[Parameter] public string CssClass { get; set; }
 	protected string CssClassEffective => this.CssClass ?? this.GetSettings()?.CssClass ?? GetDefaults().CssClass;
 
+	/// <summary>
+	/// CSS class to be rendered with the button icon.
+	/// </summary>
+	[Parameter] public string IconCssClass { get; set; }
+	protected string IconCssClassEffective => this.IconCssClass ?? this.GetSettings()?.IconCssClass ?? GetDefaults().IconCssClass;
+
 	/// <inheritdoc cref="ICascadeEnabledComponent.Enabled" />
 	[Parameter] public bool? Enabled { get; set; }
 
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css
index 38fbe5d0..47e8efdb 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css
+++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css
@@ -5,7 +5,3 @@
 ::deep .hx-button-text-icon-spacer {
     margin-left: var(--hx-button-space-between-text-icon);
 }
-
-::deep .hx-button-icon {
-    color: var(--hx-button-icon-color);
-}