Add new Icon parameter to BitProPanel (#12246)

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor

@@ -42,10 +42,11 @@
 
             @if (ShowCloseButton)
             {
+                var closeIcon = BitIconInfo.From(CloseIcon, CloseIconName ?? "Cancel");
                 <button @onclick="ClosePanel"
                         style="@Styles?.CloseButton"
                         class="bit-ppl-cls @Classes?.CloseButton">
-                    <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
+                    <i style="@Styles?.CloseIcon" class="bit-ppl-cli @closeIcon?.GetCssClasses() @Classes?.CloseIcon" />
                 </button>
             }
         </div>

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs

@@ -34,6 +34,26 @@ public partial class BitProPanel : BitComponentBase
     /// </summary>
     [Parameter] public BitProPanelClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// Gets or sets the icon to display in the close button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="CloseIconName"/> 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="CloseIconName"/> instead.
+    /// </remarks>
+    [Parameter] public BitIconInfo? CloseIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the close button from the built-in Fluent UI icons.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Cancel</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="CloseIcon"/> instead.
+    /// </remarks>
+    [Parameter] public string? CloseIconName { get; set; }
+
     /// <summary>
     /// The template used to render the footer section of the panel.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor

@@ -322,7 +322,25 @@
                 </BitProPanel>
             </DemoExample>
 
-            <DemoExample Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+            <DemoExample Title="External Icon" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+                <div>Use icons from external libraries like FontAwesome to customize the close button icon with the <b>CloseIcon</b> parameter.</div>
+                <br /><br />
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+                <BitButton OnClick="() => isExternalIconProPanelOpen = true">Open ProPanel</BitButton>
+                <BitProPanel @bind-IsOpen="isExternalIconProPanelOpen"
+                             ShowCloseButton
+                             HeaderText="External Close Icon"
+                             CloseIcon="@BitIconInfo.Fa("solid xmark")">
+                    <div style="max-width:300px">
+                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
+                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
+                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
+                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
+                    </div>
+                </BitProPanel>
+            </DemoExample>
+
+            <DemoExample Title="RTL" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
                 <div>Use BitProPanel in right-to-left (RTL).</div>
                 <br /><br />
                 <div>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs

@@ -42,6 +42,24 @@ public partial class BitProPanelDemo
             LinkType = LinkType.Link,
         },
         new()
+        {
+            Name = "CloseIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "Gets or sets the icon to display in the close button using custom CSS classes for external icon libraries. Takes precedence over CloseIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "CloseIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Gets or sets the name of the icon to display in the close button from the built-in Fluent UI icons.",
+            LinkType = LinkType.Link,
+            Href = "https://blazorui.bitplatform.dev/iconography",
+        },
+        new()
         {
             Name = "Footer",
             Type = "RenderFragment?",
@@ -240,6 +258,35 @@ public partial class BitProPanelDemo
                    Description = "Custom CSS classes/styles for the footer container of the BitProPanel."
                }
             ]
+        },
+        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."
+               },
+            ]
         }
     ];
 
@@ -291,6 +338,8 @@ public partial class BitProPanelDemo
     private bool isProPanelStylesOpen;
     private bool isProPanelClassesOpen;
 
+    private bool isExternalIconProPanelOpen;
+
     private bool isRtlProPanelOpenStart;
     private bool isRtlProPanelOpenEnd;
 
@@ -640,6 +689,24 @@ BitProPanel with <b>Classes</b> to customize its elements.
 private bool isPanelClassesOpen;";
 
     private readonly string example7RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<BitButton OnClick=""() => isExternalIconProPanelOpen = true"">Open ProPanel</BitButton>
+<BitProPanel @bind-IsOpen=""isExternalIconProPanelOpen""
+             ShowCloseButton
+             HeaderText=""External Close Icon""
+             CloseIcon=""@BitIconInfo.Fa(""solid xmark"")"">  
+    <div style=""max-width:300px"">
+        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
+        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
+        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
+        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
+    </div>
+</BitProPanel>";
+    private readonly string example7CsharpCode = @"
+private bool isExternalIconProPanelOpen;";
+
+    private readonly string example8RazorCode = @"
 <BitButton OnClick=""() => isRtlPanelOpenStart = true"">آغاز</BitButton>
 <BitButton OnClick=""() => isRtlPanelOpenEnd = true"">پایان</BitButton>
 
@@ -665,7 +732,7 @@ کتابهای زیادی در شصت و سه درصد گذشته، حال و آ
         در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
     </div>
 </BitProPanel>";
-    private readonly string example7CsharpCode = @"
+    private readonly string example8CsharpCode = @"
 private bool isRtlProPanelOpenStart;
 private bool isRtlProPanelOpenEnd;";
 }