diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor index 462a288113..40ea7514bf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor @@ -4,6 +4,7 @@ @{ var hasPrimary = (PrimaryTemplate ?? ChildContent) is not null; var hasSecondary = SecondaryText.HasValue() || SecondaryTemplate is not null; + var icon = BitIconInfo.From(Icon, IconName); } @if (Href.HasNoValue()) @@ -22,9 +23,9 @@ aria-describedby="@AriaDescription"> @if (IsLoading is false) { - @if (IconName.HasValue()) + @if (icon is not null) { - + } else if (IconUrl.HasValue()) { @@ -94,9 +95,9 @@ else aria-label="@AriaLabel" aria-hidden="@AriaHidden" aria-describedby="@AriaDescription"> - @if (IconName.HasValue()) + @if (icon is not null) { - + } else if (IconUrl.HasValue()) { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs index ce31283e52..6cb034961f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs @@ -116,6 +116,21 @@ public partial class BitButton : BitComponentBase [CallOnSet(nameof(OnSetHrefAndRel))] public string? Href { get; set; } + /// + /// Gets or sets the icon to display using custom CSS classes for external icon libraries. + /// Takes precedence over when both are set. + /// + /// + /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons. + /// For built-in Fluent UI icons, use instead. + /// + /// + /// FontAwesome: Icon="BitIconInfo.Fa("solid house")" + /// Material: Icon="BitIconInfo.Material("home")" + /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")" + /// + [Parameter] public BitIconInfo? Icon { get; set; } + /// /// The name of the icon to render inside the button. /// diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor index 95c91a70c5..fe234f02c7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor @@ -567,7 +567,74 @@ - + +
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.
+ +
+
+ + + +
FontAwesome:
+
+ + House (Icon="@@("fa-solid fa-house")") + + +
+
+ + + Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")") + + +
+
+ + + GitHub (Icon="@@BitIconInfo.Fa("brands github")") + + +
+
+ + + Rocket (Icon="@@BitIconInfo.Fa("solid rocket")") + + +



+ + + +
Bootstrap:
+
+ + House (Icon="@@("bi bi-house-fill")") + + +
+
+ + + Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")") + + +
+
+ + + GitHub (Icon="@@BitIconInfo.Bi("github")") + + +
+
+ + + Gear (Icon="@@BitIconInfo.Bi("gear-fill")") + + + +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


Component's Style & Class:
@@ -608,7 +675,7 @@ - +
Use BitButton in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs index df7e4544f6..a53ad46010 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs @@ -125,11 +125,20 @@ public partial class BitButtonDemo Description = "The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.", }, new() + { + Name = "Icon", + Type = "BitIconInfo?", + DefaultValue = "null", + Description = "Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.", + LinkType = LinkType.Link, + Href = "#bit-icon-info", + }, + new() { Name = "IconName", Type = "string?", DefaultValue = "null", - Description = "The name of the icon to render inside the button." + Description = "The name of the icon to render inside the button from the built-in Fluent UI icons." }, new() { @@ -334,7 +343,36 @@ public partial class BitButtonDemo Description = "Custom CSS classes/styles for the loading label section of the BitButton." }, ] - } + }, + new() + { + Id = "bit-icon-info", + Title = "BitIconInfo", + Parameters = + [ + new() + { + Name = "Name", + Type = "string?", + DefaultValue = "null", + Description = "Gets or sets the name of the icon." + }, + new() + { + Name = "BaseClass", + Type = "string?", + DefaultValue = "null", + Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty." + }, + new() + { + Name = "Prefix", + Type = "string?", + DefaultValue = "null", + Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty." + }, + ] + }, ]; private readonly List componentSubEnums = diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs index bc24f418cf..0dc74da841 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs @@ -518,6 +518,44 @@ private async Task LoadingTemplateClick() TertiaryBorder"; private readonly string example17RazorCode = @" + + + + House (Icon=""@@(""fa-solid fa-house"")"") + + + + Heart (Icon=""@@BitIconInfo.Css(""fa-solid fa-heart"")"") + + + + GitHub (Icon=""@@BitIconInfo.Fa(""brands github"")"") + + + + Rocket (Icon=""@@BitIconInfo.Fa(""solid rocket"")"") + + + + + + + House (Icon=""@@(""bi bi-house-fill"")"") + + + + Heart (Icon=""@@BitIconInfo.Css(""bi bi-heart-fill"")"") + + + + GitHub (Icon=""@@BitIconInfo.Bi(""github"")"") + + + + Gear (Icon=""@@BitIconInfo.Bi(""gear-fill"")"") +"; + + private readonly string example18RazorCode = @"