Add new Icon parameters to BitTimePicker (#12096)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor

@@ -1,6 +1,14 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitInputBase<TimeSpan?>
 
+@{
+    var increaseHourIcon = BitIconInfo.From(IncreaseHourIcon, IncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180");
+    var decreaseHourIcon = BitIconInfo.From(DecreaseHourIcon, DecreaseHourIconName ?? "ChevronDownSmall");
+    var increaseMinuteIcon = BitIconInfo.From(IncreaseMinuteIcon, IncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180");
+    var decreaseMinuteIcon = BitIconInfo.From(DecreaseMinuteIcon, DecreaseMinuteIconName ?? "ChevronDownSmall");
+    var closeIcon = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel");
+}
+
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      style="@StyleBuilder.Value"
@@ -53,7 +61,8 @@
                 }
                 else
                 {
-                    <i style="@Styles?.Icon" class="bit-tpc-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
+                    var icon = BitIconInfo.From(Icon, IconName ?? "Clock");
+                    <i style="@Styles?.Icon" class="bit-tpc-ico @icon?.GetCssClasses() @Classes?.Icon" aria-hidden="true" />
                 }
             </div>
         </div>
@@ -88,7 +97,7 @@
                             style="@Styles?.IncreaseHourButton"
                             class="bit-tpc-tbt @Classes?.IncreaseHourButton"
                             disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.IncreaseHourIcon" class="bit-icon bit-icon--ChevronDownSmall bit-ico-r180 @Classes?.IncreaseHourIcon" aria-hidden="true" />
+                        <i style="@Styles?.IncreaseHourIcon" class="@increaseHourIcon?.GetCssClasses() @Classes?.IncreaseHourIcon" aria-hidden="true" />
                     </button>
                     <input @ref="_inputHourRef"
                            @bind="@_hourView"
@@ -110,7 +119,7 @@
                             style="@Styles?.DecreaseHourButton"
                             class="bit-tpc-tbt @Classes?.DecreaseHourButton"
                             disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.DecreaseHourIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseHourIcon" aria-hidden="true" />
+                        <i style="@Styles?.DecreaseHourIcon" class="@decreaseHourIcon?.GetCssClasses() @Classes?.DecreaseHourIcon" aria-hidden="true" />
                     </button>
                 </div>
                 <div style="@Styles?.HourMinuteSeparator" class="bit-tpc-tpr bit-tpc-tdv @Classes?.HourMinuteSeparator">:</div>
@@ -122,7 +131,7 @@
                             style="@Styles?.IncreaseMinuteButton"
                             class="bit-tpc-tbt @Classes?.IncreaseMinuteButton"
                             disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.IncreaseMinuteIcon" class="bit-icon bit-icon--ChevronDownSmall bit-ico-r180 @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
+                        <i style="@Styles?.IncreaseMinuteIcon" class="@increaseMinuteIcon?.GetCssClasses() @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
                     </button>
                     <input @ref="_inputMinuteRef"
                            @bind="@_minuteView"
@@ -144,7 +153,7 @@
                             style="@Styles?.DecreaseMinuteButton"
                             class="bit-tpc-tbt @Classes?.DecreaseMinuteButton"
                             disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.DecreaseMinuteIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
+                        <i style="@Styles?.DecreaseMinuteIcon" class="@decreaseMinuteIcon?.GetCssClasses() @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
                     </button>
                 </div>
             </div>
@@ -178,7 +187,7 @@
                         class="bit-tpc-tbt bit-tpc-cbn @Classes?.CloseButton"
                         title="@CloseButtonTitle"
                         aria-label="@CloseButtonTitle">
-                    <i style="@Styles?.CloseButtonIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseButtonIcon" aria-hidden="true" />
+                    <i style="@Styles?.CloseButtonIcon" class="@closeIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
                 </button>
             }
         </div>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs

@@ -1,4 +1,4 @@
-using System.Globalization;
+using System.Globalization;
 using System.Diagnostics.CodeAnalysis;
 
 namespace Bit.BlazorUI;
@@ -115,6 +115,17 @@ private string? _minuteView
     /// </summary>
     [Parameter] public BitTimePickerClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// Gets or sets the close button icon using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="CloseButtonIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? CloseButtonIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the close button icon from the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? CloseButtonIconName { get; set; }
+
     /// <summary>
     /// The title of the close button (tooltip).
     /// </summary>
@@ -127,6 +138,28 @@ private string? _minuteView
     [CallOnSet(nameof(OnSetCulture))]
     public CultureInfo? Culture { get; set; }
 
+    /// <summary>
+    /// Gets or sets the decrease hour button icon using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="DecreaseHourIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? DecreaseHourIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the decrease hour button icon from the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? DecreaseHourIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the decrease minute button icon using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="DecreaseMinuteIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? DecreaseMinuteIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the decrease minute button icon from the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? DecreaseMinuteIconName { get; set; }
+
     /// <summary>
     /// Determines the allowed drop directions of the callout.
     /// </summary>
@@ -144,9 +177,35 @@ private string? _minuteView
     [Parameter] public int HourStep { get; set; } = 1;
 
     /// <summary>
-    /// Optional TimePicker icon
+    /// Gets or sets the icon to display 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("gear-fill")"
+    /// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
+    /// 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 from the built-in Fluent UI icons.
     /// </summary>
-    [Parameter] public string IconName { get; set; } = "Clock";
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Clock</c>).
+    /// <br />
+    /// Browse available names in <c>BitIconName</c> of the <c>Bit.BlazorUI.Icons</c> nuget package or the gallery: 
+    /// <see href="https://blazorui.bitplatform.dev/iconography"/>.
+    /// <br />
+    /// The value is case-sensitive and must match a valid icon identifier. 
+    /// If not set or set to <c>null</c>, the default Clock icon will be rendered.
+    /// <br />
+    /// For external icon libraries, use <see cref="Icon"/> instead.
+    /// </remarks>
+    [Parameter] public string? IconName { get; set; }
 
     /// <summary>
     /// TimePicker icon location
@@ -159,6 +218,28 @@ private string? _minuteView
     /// </summary>
     [Parameter] public RenderFragment? IconTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets the increase hour button icon using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IncreaseHourIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? IncreaseHourIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the increase hour button icon from the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? IncreaseHourIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the increase minute button icon using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IncreaseMinuteIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? IncreaseMinuteIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the increase minute button icon from the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? IncreaseMinuteIconName { get; set; }
+
     /// <summary>
     /// The custom validation error message for the invalid value.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor

@@ -1,4 +1,4 @@
-@page "/components/timepicker"
+@page "/components/timepicker"
 @page "/components/time-picker"
 
 <PageOutlet Url="components/timepicker"
@@ -190,7 +190,46 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <DemoExample Title="External Icons" RazorCode="@example13RazorCode" Id="example13">
+        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
+
+        <br />
+        <br />
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+
+        <div>FontAwesome:</div>
+        <br />
+        <div class="example-content">
+            <BitTimePicker Icon="@("fa-solid fa-clock")" Placeholder="Select a time..." />
+            <br />
+            <BitTimePicker Icon="@BitIconInfo.Css("fa-solid fa-hourglass-half")"
+                           Placeholder="Select a time..."
+                           IconLocation="BitIconLocation.Left" />
+            <br />
+            <BitTimePicker Icon="@BitIconInfo.Fa("solid stopwatch")"
+                           Placeholder="Select a time..." />
+        </div>
+
+        <br /><br /><br /><br />
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+        <div>Bootstrap:</div>
+        <br />
+        <div class="example-content">
+            <BitTimePicker Icon="@("bi bi-clock-fill")" Placeholder="Select a time..." />
+            <br />
+            <BitTimePicker Icon="@BitIconInfo.Css("bi bi-alarm-fill")"
+                           Placeholder="Select a time..."
+                           IconLocation="BitIconLocation.Left" />
+            <br />
+            <BitTimePicker Icon="@BitIconInfo.Bi("stopwatch-fill")"
+                           Placeholder="Select a time..." />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>Explore styling and class customization for BitTimePicker, including component styles, custom classes, and detailed styles.</div>
         <br /><br />
         <div>Component's Style & Class:</div>
@@ -228,7 +267,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
+    <DemoExample Title="RTL" RazorCode="@example15RazorCode" Id="example15">
         <div>Use BitTimePicker in right-to-left (RTL).</div>
         <br />
         <div dir="rtl">