[HxButton] To be able to set different icon color than Button text #466…

… - add IconCssClass parameter
havit · Feb 22, 2023 · 8db2641 · 8db2641
1 parent e33210a
commit 8db2641
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
-}