Add new Icon parameters to BitNumberField (#12088)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor

@@ -2,6 +2,13 @@
 @inherits BitTextInputBase<TValue>
 @typeparam TValue
 
+@{
+    var icon = BitIconInfo.From(Icon, IconName);
+    var incrementIcon = BitIconInfo.From(IncrementIcon, IncrementIconName ?? "ChevronDownSmall bit-ico-r180");
+    var decrementIcon = BitIconInfo.From(DecrementIcon, DecrementIconName ?? "ChevronDownSmall");
+    var clearButtonIcon = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel");
+}
+
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      style="@StyleBuilder.Value"
@@ -63,7 +70,7 @@
                     aria-label="@DecrementAriaLabel">
                 <span style="@Styles?.DecrementIconContainer" class="bit-nfl-aic @Classes?.DecrementIconContainer">
                     <i style="@Styles?.DecrementIcon"
-                       class="bit-nfl-bic bit-nfl-sbi bit-icon bit-icon--@(DecrementIconName ?? "ChevronDownSmall") @Classes?.DecrementIcon" />
+                       class="bit-nfl-bic bit-nfl-sbi @decrementIcon.GetCssClasses() @Classes?.DecrementIcon" />
                 </span>
             </button>
         }
@@ -138,14 +145,14 @@
                                 aria-hidden="true"
                                 aria-label="Clear text"
                                 disabled="@(IsEnabled is false)">
-                            <i style="@Styles?.ClearButtonIcon" class="bit-icon bit-icon--Cancel @Classes?.ClearButtonIcon" aria-hidden="true" />
+                            <i style="@Styles?.ClearButtonIcon" class="@clearButtonIcon.GetCssClasses() @Classes?.ClearButtonIcon" aria-hidden="true" />
                         </button>
                     }
         }
 
         @if (Mode == BitSpinButtonMode.Compact)
         {
-            <div style="@Styles?.ButtonsContainer" class="bit-nfl-act @Classes?.ButtonsContainer">
+            <span style="@Styles?.ButtonsContainer" class="bit-nfl-act @Classes?.ButtonsContainer">
                 <button @ref="_buttonIncrement"
                         @onpointerup="HandleOnPointerUpOrOut"
                         @onpointerout="HandleOnPointerUpOrOut"
@@ -161,7 +168,7 @@
                         aria-disabled="@(IsEnabled is false)">
                     <span style="@Styles?.IncrementIconContainer" class="bit-nfl-aic @Classes?.IncrementIconContainer">
                         <i style="@Styles?.IncrementIcon"
-                           class="bit-nfl-bic bit-icon bit-icon--@(IncrementIconName ?? "ChevronDownSmall bit-ico-r180") @Classes?.IncrementIcon" />
+                           class="bit-nfl-bic @incrementIcon?.GetCssClasses() @Classes?.IncrementIcon" />
                     </span>
                 </button>
 
@@ -180,10 +187,10 @@
                         aria-disabled="@(IsEnabled is false)">
                     <span style="@Styles?.DecrementIconContainer" class="bit-nfl-aic @Classes?.DecrementIconContainer">
                         <i style="@Styles?.DecrementIcon"
-                           class="bit-nfl-bic bit-icon bit-icon--@(DecrementIconName ?? "ChevronDownSmall") @Classes?.DecrementIcon" />
+                           class="bit-nfl-bic @decrementIcon?.GetCssClasses() @Classes?.DecrementIcon" />
                     </span>
                 </button>
-            </div>
+            </span>
         }
         else if (Mode == BitSpinButtonMode.Inline)
         {
@@ -201,7 +208,7 @@
                     aria-label="@DecrementAriaLabel">
                 <span style="@Styles?.DecrementIconContainer" class="bit-nfl-aic @Classes?.DecrementIconContainer">
                     <i style="@Styles?.DecrementIcon"
-                       class="bit-nfl-bic bit-nfl-sbi bit-icon bit-icon--@(DecrementIconName ?? "ChevronDownSmall") @Classes?.DecrementIcon" />
+                       class="bit-nfl-bic bit-nfl-sbi @decrementIcon?.GetCssClasses() @Classes?.DecrementIcon" />
                 </span>
             </button>
 
@@ -219,7 +226,7 @@
                     aria-label="@IncrementAriaLabel">
                 <span style="@Styles?.IncrementIconContainer" class="bit-nfl-aic @Classes?.IncrementIconContainer">
                     <i style="@Styles?.IncrementIcon"
-                       class="bit-nfl-bic bit-nfl-sbi bit-icon bit-icon--@(IncrementIconName ?? "ChevronDownSmall bit-ico-r180") @Classes?.IncrementIcon" />
+                       class="bit-nfl-bic bit-nfl-sbi @incrementIcon?.GetCssClasses() @Classes?.IncrementIcon" />
                 </span>
             </button>
         }
@@ -239,17 +246,17 @@
                     aria-label="@IncrementAriaLabel">
                 <span style="@Styles?.IncrementIconContainer" class="bit-nfl-aic @Classes?.IncrementIconContainer">
                     <i style="@Styles?.IncrementIcon"
-                       class="bit-nfl-bic bit-nfl-sbi bit-icon bit-icon--@(IncrementIconName ?? "ChevronDownSmall bit-ico-r180") @Classes?.IncrementIcon" />
+                       class="bit-nfl-bic bit-nfl-sbi @incrementIcon?.GetCssClasses() @Classes?.IncrementIcon" />
                 </span>
             </button>
         }
 
-        @if (IconName.HasValue())
+        @if (icon is not null)
         {
             <i style="@Styles?.Icon"
-               class="bit-nfl-lic bit-icon bit-icon--@IconName @Classes?.Icon"
+               class="bit-nfl-lic @icon.GetCssClasses() @Classes?.Icon"
                role="@(IconAriaLabel.HasValue() ? "img" : null)"
-               aria-label="@IconAriaLabel" 
+               aria-label="@IconAriaLabel"
                aria-hidden="@(IconAriaLabel.HasValue() ? null : "true")" />
         }
 

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs

@@ -1,4 +1,4 @@
-using System.Globalization;
+using System.Globalization;
 using System.Text.RegularExpressions;
 using System.Diagnostics.CodeAnalysis;
 
@@ -85,7 +85,23 @@ public BitNumberField()
     [Parameter] public string? DecrementAriaLabel { get; set; }
 
     /// <summary>
-    /// Custom icon name for the decrement button.
+    /// Gets or sets the icon to display on the decrement button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="DecrementIconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="DecrementIconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: DecrementIcon="BitIconInfo.Bi("dash")"
+    /// FontAwesome: DecrementIcon="BitIconInfo.Fa("solid minus")"
+    /// Custom CSS: DecrementIcon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? DecrementIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon for the decrement button from the built-in Fluent UI icons.
+    /// For external icon libraries, use <see cref="DecrementIcon"/> instead.
     /// </summary>
     [Parameter] public string? DecrementIconName { get; set; }
 
@@ -110,7 +126,23 @@ public BitNumberField()
     [Parameter] public string? IconAriaLabel { get; set; }
 
     /// <summary>
-    /// Icon name for an icon to display alongside the number field's label.
+    /// Gets or sets the icon to display alongside the number field using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: Icon="BitIconInfo.Bi("calculator")"
+    /// FontAwesome: Icon="BitIconInfo.Fa("solid calculator")"
+    /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display alongside the number field from the built-in Fluent UI icons.
+    /// For external icon libraries, use <see cref="Icon"/> instead.
     /// </summary>
     [Parameter] public string? IconName { get; set; }
 
@@ -120,7 +152,23 @@ public BitNumberField()
     [Parameter] public string? IncrementAriaLabel { get; set; }
 
     /// <summary>
-    /// Custom icon name for the increment button.
+    /// Gets or sets the icon to display on the increment button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IncrementIconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IncrementIconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: IncrementIcon="BitIconInfo.Bi("plus")"
+    /// FontAwesome: IncrementIcon="BitIconInfo.Fa("solid plus")"
+    /// Custom CSS: IncrementIcon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? IncrementIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon for the increment button from the built-in Fluent UI icons.
+    /// For external icon libraries, use <see cref="IncrementIcon"/> instead.
     /// </summary>
     [Parameter] public string? IncrementIconName { get; set; }
 
@@ -243,6 +291,27 @@ public BitNumberField()
     /// </summary>
     [Parameter] public RenderFragment? PrefixTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets the icon to display on the clear button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="ClearButtonIconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ClearButtonIconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: ClearButtonIcon="BitIconInfo.Bi("x-circle-fill")"
+    /// FontAwesome: ClearButtonIcon="BitIconInfo.Fa("solid xmark")"
+    /// Custom CSS: ClearButtonIcon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? ClearButtonIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon for the clear button from the built-in Fluent UI icons.
+    /// For external icon libraries, use <see cref="ClearButtonIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? ClearButtonIconName { get; set; }
+
     /// <summary>
     /// Whether to shows the clear button when the BitNumberField has value.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor

@@ -1,4 +1,4 @@
-@page "/components/numberfield"
+@page "/components/numberfield"
 @page "/components/numerictextfield"
 @page "/components/numeric-text-field"
 @page "/components/spinbutton"
@@ -220,7 +220,54 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example14RazorCode" Id="example14">
+    <DemoExample Title="External Icons" RazorCode="@example14RazorCode" Id="example14">
+        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b>, <b>IncrementIcon</b>, and <b>DecrementIcon</b> parameters.</div>
+
+        <br />
+        <br />
+
+        <div class="example-box">
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+
+            <div>Component Icon (FontAwesome):</div>
+            <br />
+            <BitNumberField Label="Label & Icon" TValue="int" Icon="@("fa-solid fa-calculator")" />
+
+            <br />
+
+            <BitNumberField Label="Icon with BitIconInfo.Css" TValue="int" Icon="@BitIconInfo.Css("fa-solid fa-lightbulb")" />
+
+            <br />
+
+            <BitNumberField Label="Icon with BitIconInfo.Fa" TValue="int" Icon="@BitIconInfo.Fa("solid calculator")" />
+
+            <br /><br /><br /><br />
+
+            <div>Increment & Decrement Icons (FontAwesome):</div>
+            <br />
+            <BitNumberField Label="Compact mode" TValue="int" Mode="BitSpinButtonMode.Compact"
+                            IncrementIcon="@BitIconInfo.Fa("solid plus")"
+                            DecrementIcon="@BitIconInfo.Fa("solid minus")" />
+
+            <br /><br /><br /><br />
+
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+            <div>Component Icon (Bootstrap):</div>
+            <br />
+            <BitNumberField Label="Icon with BitIconInfo.Bi" TValue="int" Icon="@BitIconInfo.Bi("calculator")" />
+
+            <br /><br /><br /><br />
+
+            <div>Increment & Decrement Icons (Bootstrap):</div>
+            <br />
+            <BitNumberField Label="Spread mode" TValue="int" Mode="BitSpinButtonMode.Spread"
+                            IncrementIcon="@BitIconInfo.Bi("plus-circle-fill")"
+                            DecrementIcon="@BitIconInfo.Bi("dash-circle-fill")" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example15RazorCode" Id="example15">
         <div>Explores styling and class customization for BitNumberField, including component styles, custom classes, and detailed style options.</div>
         <br /><br />
         <div class="example-box">
@@ -251,7 +298,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example15RazorCode" Id="example15">
+    <DemoExample Title="RTL" RazorCode="@example16RazorCode" Id="example16">
         <div>Use BitNumberField in right-to-left (RTL).</div>
         <br />
         <div dir="rtl">