From 4168a88de7633da7e5e6bafef66b34362911e77a Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 4 Jan 2026 22:49:01 +0330
Subject: [PATCH 1/6] add BitIconInfo #11684

---
 .../Bit.BlazorUI/Components/BitIconInfo.cs    | 218 +++++++++++
 .../Utilities/Icon/BitIcon.razor.cs           |  20 +-
 .../Utilities/Icon/BitIconDemo.razor          |  69 ++--
 .../Utilities/Icon/BitIconDemo.razor.cs       |  43 ++-
 .../Utilities/Icon/BitIconInfoTests.cs        | 355 ++++++++++++++++++
 5 files changed, 663 insertions(+), 42 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
new file mode 100644
index 0000000000..d5f2b8724d
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
@@ -0,0 +1,218 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents icon information for rendering icons in Bit BlazorUI components.
+/// Supports both built-in Fluent UI icons and custom/external icon libraries.
+/// </summary>
+public class BitIconInfo
+{
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/>.
+    /// </summary>
+    public BitIconInfo() { }
+
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/> with the specified icon name.
+    /// </summary>
+    /// <param name="name">The name of the icon. For built-in icons, use values from <c>BitIconName</c>.</param>
+    public BitIconInfo(string name)
+    {
+        Name = name;
+    }
+
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/> with full customization.
+    /// </summary>
+    /// <param name="name">The name of the icon or the CSS class for external icons.</param>
+    /// <param name="baseClass">
+    /// The base CSS class for the icon. 
+    /// Set to empty string for external icon libraries that don't need a base class.
+    /// When null, defaults to "bit-icon" for built-in icons.
+    /// </param>
+    /// <param name="prefix">
+    /// The CSS class prefix used before the icon name.
+    /// When null, defaults to "bit-icon--" for built-in icons.
+    /// Set to empty string for external icons that don't use a prefix.
+    /// </param>
+    public BitIconInfo(string name, string? baseClass, string? prefix = null)
+    {
+        Name = name;
+        BaseClass = baseClass;
+        Prefix = prefix;
+    }
+
+    /// <summary>
+    /// Gets or sets the name of the icon.
+    /// For built-in icons, use values from <c>BitIconName</c> (e.g., "Add", "Delete").
+    /// For external icons, this can be the full CSS class name if <see cref="BaseClass"/> and <see cref="Prefix"/> are empty.
+    /// </summary>
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    /// <example>
+    /// For FontAwesome: BaseClass = "fa" or BaseClass = ""
+    /// For Material Icons: BaseClass = "material-icons" or BaseClass = ""
+    /// </example>
+    public string? BaseClass { get; set; }
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    /// <example>
+    /// For FontAwesome 6: Prefix = "" and Name = "fa-solid fa-house"
+    /// For FontAwesome 5: Prefix = "fa-" and Name = "house"
+    /// </example>
+    public string? Prefix { get; set; }
+
+    /// <summary>
+    /// Determines whether the icon has a valid name set.
+    /// </summary>
+    /// <returns><c>true</c> if the icon has a non-empty name; otherwise, <c>false</c>.</returns>
+    public bool HasValue() => Name.HasValue();
+
+    /// <summary>
+    /// Gets the CSS classes to render the icon.
+    /// </summary>
+    /// <returns>The complete CSS class string for the icon.</returns>
+    public string GetCssClasses()
+    {
+        if (Name.HasNoValue()) return string.Empty;
+
+        if (BaseClass.HasNoValue() && Prefix.HasNoValue())
+        {
+            return Name!;
+        }
+
+        if (BaseClass.HasNoValue())
+        {
+            return $"{Prefix}{Name}";
+        }
+
+        if (Prefix.HasNoValue())
+        {
+            return $"{BaseClass} {Name}";
+        }
+
+        return $"{BaseClass} {Prefix}{Name}";
+    }
+
+    /// <summary>
+    /// Implicit conversion from string to <see cref="BitIconInfo"/>.
+    /// This maintains backward compatibility with the existing string-based IconName parameter.
+    /// </summary>
+    /// <param name="iconName">The icon name string.</param>
+    public static implicit operator BitIconInfo?(string? iconName)
+    {
+        if (iconName is null) return null;
+
+        return new BitIconInfo(iconName);
+    }
+
+    /// <summary>
+    /// Implicit conversion from <see cref="BitIconInfo"/> to string.
+    /// Returns the icon name for simple scenarios.
+    /// </summary>
+    /// <param name="iconInfo">The icon info instance.</param>
+    public static implicit operator string?(BitIconInfo? iconInfo)
+    {
+        return iconInfo?.Name;
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for an external/custom icon using the provided CSS classes directly.
+    /// </summary>
+    /// <param name="cssClasses">The complete CSS class(es) to render the icon (e.g., "fa-solid fa-house" for FontAwesome 6).</param>
+    /// <returns>A new <see cref="BitIconInfo"/> instance configured for external icons.</returns>
+    /// <example>
+    /// FontAwesome 6: BitIconInfo.Css("fa-solid fa-house")
+    /// Material Icons: BitIconInfo.Css("material-icons home")
+    /// Bootstrap Icons: BitIconInfo.Css("bi bi-house")
+    /// </example>
+    public static BitIconInfo Css(string cssClasses)
+    {
+        return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a built-in bit BlazorUI icon.
+    /// </summary>
+    /// <param name="name">The bit BlazorUI icon name (e.g., "add").</param>
+    /// <returns>A new <see cref="BitIconInfo"/> instance configured for bit BlazorUI icons.</returns>
+    /// <example>
+    /// BitIconInfo.Bit("add")
+    /// </example>
+    public static BitIconInfo Bit(string name)
+    {
+        return new BitIconInfo(name, baseClass: "bit-icon", prefix: "bit-icon--");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a FontAwesome icon.
+    /// </summary>
+    /// <param name="icons">The FontAwesome icon classes (e.g., "fa-solid fa-house" or just "fa-house" with style parameter).</param>
+    /// <returns>A new <see cref="BitIconInfo"/> instance configured for FontAwesome icons.</returns>
+    /// <example>
+    /// BitIconInfo.Fa("solid house")
+    /// BitIconInfo.Fa("fa-brands fa-github")
+    /// </example>
+    public static BitIconInfo Fa(string icons)
+    {
+        var cssClasses = string.Join(' ', icons.Split(' ').Select(i => i.StartsWith("fa-") ? i : $"fa-{i}"));
+
+        return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a Material Icons icon.
+    /// </summary>
+    /// <param name="iconName">The Material Icon name (e.g., "home", "search", "menu").</param>
+    /// <returns>A new <see cref="BitIconInfo"/> instance configured for Material Icons.</returns>
+    /// <example>
+    /// BitIconInfo.Material("home")
+    /// BitIconInfo.Material("search")
+    /// </example>
+    public static BitIconInfo Material(string iconName)
+    {
+        return new BitIconInfo(iconName, baseClass: "material-icons", prefix: "");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a Bootstrap Icons icon.
+    /// </summary>
+    /// <param name="iconName">The Bootstrap Icon name without the "bi-" prefix (e.g., "house", "search").</param>
+    /// <returns>A new <see cref="BitIconInfo"/> instance configured for Bootstrap Icons.</returns>
+    /// <example>
+    /// BitIconInfo.Bootstrap("house")
+    /// BitIconInfo.Bootstrap("search")
+    /// </example>
+    public static BitIconInfo Bootstrap(string iconName)
+    {
+        return new BitIconInfo(iconName, baseClass: "bi", prefix: "bi-");
+    }
+
+    /// <summary>
+    /// Resolves the effective icon from either a <see cref="BitIconInfo"/> or an icon name string.
+    /// The <paramref name="icon"/> parameter takes precedence when both are provided.
+    /// </summary>
+    /// <param name="icon">The icon info instance, if provided.</param>
+    /// <param name="iconName">The icon name string for built-in icons, if provided.</param>
+    /// <returns>A <see cref="BitIconInfo"/> instance if either parameter has a value; otherwise, <c>null</c>.</returns>
+    /// <remarks>
+    /// This method is intended for internal use by components to unify the handling of
+    /// the <c>Icon</c> and <c>IconName</c> parameters.
+    /// </remarks>
+    public static BitIconInfo? From(BitIconInfo? icon, string? iconName)
+    {
+        if (icon is not null) return icon;
+
+        if (iconName.HasNoValue()) return null;
+
+        return Bit(iconName!);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
index 9d9d7846d5..50c234d7e4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
@@ -12,11 +12,27 @@ public partial class BitIcon : BitComponentBase
     public BitColor? Color { get; set; }
 
     /// <summary>
-    /// The icon name for the icon shown.
+    /// The icon name for the icon shown from the built-in Fluent UI icons.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public string? IconName { get; set; }
 
+    /// <summary>
+    /// 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>
+    /// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
+    /// Material: Icon="BitIconInfo.Material("home")"
+    /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter, ResetClassBuilder]
+    public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// The size of the icon.
     /// </summary>
@@ -57,7 +73,7 @@ protected override void RegisterCssClasses()
             _ => "bit-ico-pri"
         });
 
-        ClassBuilder.Register(() => IconName.HasValue() ? $"bit-icon bit-icon--{IconName}" : string.Empty);
+        ClassBuilder.Register(() => BitIconInfo.From(Icon, IconName)?.GetCssClasses());
 
         ClassBuilder.Register(() => Size switch
         {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
index f4829557b9..0b918d2421 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/icon"
+@page "/components/icon"
 
 <PageOutlet Url="components/icon"
             Title="Icon"
@@ -36,30 +36,7 @@
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Text" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example3RazorCode" Id="example3">
-        <div>Small</div><br />
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
-        <br /><br /><br /><br />
-        <div>Medium</div><br />
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
-        <br /><br /><br /><br />
-        <div>Large</div><br />
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Pinned" />
-    </DemoExample>
-
-    <DemoExample Title="Color" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Color" RazorCode="@example3RazorCode" Id="example3">
         <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
         <br /><br /><br />
         <div>Primary</div><br />
@@ -119,7 +96,47 @@
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Pinned" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+    <DemoExample Title="External Icons" RazorCode="@example4RazorCode" Id="example4">
+        <div>Use icons from external libraries like FontAwesome 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" />
+        
+        <BitIcon Icon="@("fa-solid fa-house")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Error" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Fa("fa-brands fa-github")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Secondary" />
+    </DemoExample>
+
+    <DemoExample Title="Size" RazorCode="@example5RazorCode" Id="example5">
+        <div>Small</div><br />
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
+        <br /><br /><br /><br />
+        <div>Medium</div><br />
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
+        <br /><br /><br /><br />
+        <div>Large</div><br />
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Pinned" />
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <div>
             <BitIcon IconName="@BitIconName.Accept" Size="BitSize.Large"
                      Style="background-color: brown; border-radius: 4px" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
index 28f1cedbab..dcbd599dfc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
@@ -14,11 +14,18 @@ public partial class BitIconDemo
             Href = "#color-enum",
         },
         new()
+        {
+            Name = "Icon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.",
+        },
+        new()
         {
             Name = "IconName",
             Type = "string",
             DefaultValue = "",
-            Description = "The icon name for the icon shown",
+            Description = "The icon name for the icon shown from built-in Fluent UI icons.",
             LinkType = LinkType.Link,
             Href = "/iconography",
         },
@@ -230,19 +237,6 @@ public partial class BitIconDemo
 <BitIcon IconName=""@BitIconName.Accept"" Variant=""BitVariant.Text"" />";
 
     private readonly string example3RazorCode = @"
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Pinned"" />
-
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Pinned"" />
-
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Pinned"" />";
-
-    private readonly string example4RazorCode = @"
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Accept"" />
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Bus"" />
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Pinned"" />
@@ -275,7 +269,28 @@ public partial class BitIconDemo
 <BitIcon Color=""BitColor.Error"" IconName=""@BitIconName.Bus"" />
 <BitIcon Color=""BitColor.Error"" IconName=""@BitIconName.Pinned"" />";
 
+    private readonly string example4RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+        
+<BitIcon Icon=""@(""fa-solid fa-house"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" Color=""BitColor.Error"" />
+<BitIcon Icon=""@BitIconInfo.Fa(""fa-brands fa-github"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Fa(""solid rocket"")"" Color=""BitColor.Secondary"" />";
+
     private readonly string example5RazorCode = @"
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Pinned"" />
+
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Pinned"" />
+
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Pinned"" />";
+
+    private readonly string example6RazorCode = @"
 <style>
     .icon-class {
         padding: 4px;
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
new file mode 100644
index 0000000000..c20ad7be69
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
@@ -0,0 +1,355 @@
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Utilities.Icon;
+
+[TestClass]
+public class BitIconInfoTests
+{
+    [TestMethod]
+    public void Constructor_ShouldSetAllProperties()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.AreEqual("fa", iconInfo.BaseClass);
+        Assert.AreEqual("fa-", iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void Constructor_WithOnlyName_ShouldSetNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithBaseClassAndPrefix_ShouldReturnCorrectClasses()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("fa fa-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithBaseClassOnly_ShouldReturnBaseClassAndName()
+    {
+        var iconInfo = new BitIconInfo("home", "material-icons", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("material-icons home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithPrefixOnly_ShouldReturnPrefixedName()
+    {
+        var iconInfo = new BitIconInfo("home", "", "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithNameOnly_ShouldUseDefaultBitIconClasses()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        var result = iconInfo.GetCssClasses();
+
+        // When BaseClass is null, it defaults to "bit-icon"
+        // When Prefix is null, it defaults to "bit-icon--"
+        Assert.AreEqual("bit-icon bit-icon--home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithEmptyBaseClassAndPrefix_ShouldReturnNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home", "", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("home", result);
+    }
+
+    [TestMethod]
+    public void HasValue_WithName_ShouldReturnTrue()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        Assert.IsTrue(iconInfo.HasValue());
+    }
+
+    [TestMethod]
+    public void HasValue_WithEmptyName_ShouldReturnFalse()
+    {
+        var iconInfo = new BitIconInfo("");
+
+        Assert.IsFalse(iconInfo.HasValue());
+    }
+
+    [TestMethod]
+    public void HasValue_WithNullName_ShouldReturnFalse()
+    {
+        var iconInfo = new BitIconInfo(null!);
+
+        Assert.IsFalse(iconInfo.HasValue());
+    }
+
+    [TestMethod]
+    public void HasValue_WithWhitespaceName_ShouldReturnFalse()
+    {
+        var iconInfo = new BitIconInfo("   ");
+
+        Assert.IsFalse(iconInfo.HasValue());
+    }
+
+    // Factory Method Tests
+
+    [TestMethod]
+    public void Css_ShouldCreateIconInfoWithEmptyBaseClassAndPrefix()
+    {
+        var iconInfo = BitIconInfo.Css("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("", iconInfo.BaseClass);
+        Assert.AreEqual("", iconInfo.Prefix);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesome_ShouldCreateIconInfoForFontAwesome6()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("", iconInfo.BaseClass);
+        Assert.AreEqual("", iconInfo.Prefix);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesome_ShouldHandleBrandIcons()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
+
+        Assert.AreEqual("fa-brands fa-github", iconInfo.Name);
+        Assert.AreEqual("fa-brands fa-github", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void Material_ShouldCreateMaterialIconInfo()
+    {
+        var iconInfo = BitIconInfo.Material("home");
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.AreEqual("material-icons", iconInfo.BaseClass);
+        Assert.AreEqual("", iconInfo.Prefix);
+        Assert.AreEqual("material-icons home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void Material_ShouldHandleVariousIconNames()
+    {
+        var iconInfo = BitIconInfo.Material("settings");
+
+        Assert.AreEqual("settings", iconInfo.Name);
+        Assert.AreEqual("material-icons", iconInfo.BaseClass);
+        Assert.AreEqual("material-icons settings", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void Bootstrap_ShouldCreateBootstrapIconInfo()
+    {
+        var iconInfo = BitIconInfo.Bootstrap("check-circle");
+
+        Assert.AreEqual("check-circle", iconInfo.Name);
+        Assert.AreEqual("bi", iconInfo.BaseClass);
+        Assert.AreEqual("bi-", iconInfo.Prefix);
+        Assert.AreEqual("bi bi-check-circle", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void Bootstrap_ShouldHandleVariousIconNames()
+    {
+        var iconInfo = BitIconInfo.Bootstrap("house");
+
+        Assert.AreEqual("house", iconInfo.Name);
+        Assert.AreEqual("bi", iconInfo.BaseClass);
+        Assert.AreEqual("bi-", iconInfo.Prefix);
+        Assert.AreEqual("bi bi-house", iconInfo.GetCssClasses());
+    }
+
+    // Implicit Conversion Tests
+
+    [TestMethod]
+    public void ImplicitConversion_FromString_ShouldCreateIconInfo()
+    {
+        BitIconInfo iconInfo = "home";
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void ImplicitConversion_FromNullString_ShouldReturnNull()
+    {
+        string? nullString = null;
+        BitIconInfo? iconInfo = nullString;
+
+        Assert.IsNull(iconInfo);
+    }
+
+    [TestMethod]
+    public void ImplicitConversion_ToString_ShouldReturnName()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        string? result = iconInfo;
+
+        Assert.AreEqual("home", result);
+    }
+
+    [TestMethod]
+    public void ImplicitConversion_FromNullIconInfo_ShouldReturnNull()
+    {
+        BitIconInfo? iconInfo = null;
+
+        string? result = iconInfo;
+
+        Assert.IsNull(result);
+    }
+
+    // CSS class generation tests
+
+    [TestMethod]
+    public void GetCssClasses_FontAwesome6_SolidIcon_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-user");
+
+        Assert.AreEqual("fa-solid fa-user", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_FontAwesome6_RegularIcon_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-regular fa-heart");
+
+        Assert.AreEqual("fa-regular fa-heart", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_FontAwesome6_BrandIcon_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
+
+        Assert.AreEqual("fa-brands fa-github", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_Bootstrap_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Bootstrap("arrow-right");
+
+        Assert.AreEqual("bi bi-arrow-right", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_Material_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Material("favorite");
+
+        Assert.AreEqual("material-icons favorite", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_CustomCss_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Css("my-custom-icon-class");
+
+        Assert.AreEqual("my-custom-icon-class", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_CustomIconWithConstructor_ShouldGenerateCorrectClasses()
+    {
+        var iconInfo = new BitIconInfo("custom-icon", "my-icons", "ico-");
+
+        Assert.AreEqual("my-icons ico-custom-icon", iconInfo.GetCssClasses());
+    }
+
+    // Edge Cases
+
+    [TestMethod]
+    public void GetCssClasses_WithEmptyBaseClass_ShouldHandleCorrectly()
+    {
+        var iconInfo = new BitIconInfo("home", "", "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithEmptyPrefix_ShouldHandleCorrectly()
+    {
+        var iconInfo = new BitIconInfo("home", "icons", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icons home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithAllEmptyStrings_ShouldReturnEmptyString()
+    {
+        var iconInfo = new BitIconInfo("", "", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("", result);
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithSpecialCharactersInName_ShouldHandleCorrectly()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-arrow-circle-right");
+
+        Assert.AreEqual("fa-solid fa-arrow-circle-right", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_Bootstrap_WithHyphenatedName_ShouldHandleCorrectly()
+    {
+        var iconInfo = BitIconInfo.Bootstrap("check-circle-fill");
+
+        Assert.AreEqual("bi bi-check-circle-fill", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void DefaultConstructor_ShouldCreateEmptyIconInfo()
+    {
+        var iconInfo = new BitIconInfo();
+
+        Assert.IsNull(iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+        Assert.IsFalse(iconInfo.HasValue());
+    }
+
+    [TestMethod]
+    public void GetCssClasses_WithNullName_ShouldReturnEmptyString()
+    {
+        var iconInfo = new BitIconInfo();
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("", result);
+    }
+}

From 9844cd7347c463d407573b5f198d14481b2b4be7 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 4 Jan 2026 23:09:02 +0330
Subject: [PATCH 2/6] improve code quality

---
 .../Bit.BlazorUI/Components/BitIconInfo.cs    | 113 +++++++++---------
 .../Utilities/Icon/BitIcon.razor.cs           |   5 -
 .../Utilities/Icon/BitIconInfoTests.cs        | 107 +++++------------
 3 files changed, 86 insertions(+), 139 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
index d5f2b8724d..e539272a20 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
@@ -14,7 +14,9 @@ public BitIconInfo() { }
     /// <summary>
     /// Creates a new instance of <see cref="BitIconInfo"/> with the specified icon name.
     /// </summary>
-    /// <param name="name">The name of the icon. For built-in icons, use values from <c>BitIconName</c>.</param>
+    /// <param name="name">
+    /// The name of the icon.
+    /// </param>
     public BitIconInfo(string name)
     {
         Name = name;
@@ -23,16 +25,16 @@ public BitIconInfo(string name)
     /// <summary>
     /// Creates a new instance of <see cref="BitIconInfo"/> with full customization.
     /// </summary>
-    /// <param name="name">The name of the icon or the CSS class for external icons.</param>
+    /// <param name="name">
+    /// The name of the icon or the CSS class for external icons.
+    /// </param>
     /// <param name="baseClass">
     /// The base CSS class for the icon. 
-    /// Set to empty string for external icon libraries that don't need a base class.
-    /// When null, defaults to "bit-icon" for built-in icons.
+    /// Set to null or empty string for external icon libraries that don't need a base class.
     /// </param>
     /// <param name="prefix">
     /// The CSS class prefix used before the icon name.
-    /// When null, defaults to "bit-icon--" for built-in icons.
-    /// Set to empty string for external icons that don't use a prefix.
+    /// Set to null or empty string for external icons that don't use a prefix.
     /// </param>
     public BitIconInfo(string name, string? baseClass, string? prefix = null)
     {
@@ -43,38 +45,23 @@ public BitIconInfo(string name, string? baseClass, string? prefix = null)
 
     /// <summary>
     /// Gets or sets the name of the icon.
-    /// For built-in icons, use values from <c>BitIconName</c> (e.g., "Add", "Delete").
     /// For external icons, this can be the full CSS class name if <see cref="BaseClass"/> and <see cref="Prefix"/> are empty.
     /// </summary>
     public string? Name { get; set; }
 
     /// <summary>
     /// 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.
     /// </summary>
-    /// <example>
-    /// For FontAwesome: BaseClass = "fa" or BaseClass = ""
-    /// For Material Icons: BaseClass = "material-icons" or BaseClass = ""
-    /// </example>
     public string? BaseClass { get; set; }
 
     /// <summary>
     /// 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.
     /// </summary>
-    /// <example>
-    /// For FontAwesome 6: Prefix = "" and Name = "fa-solid fa-house"
-    /// For FontAwesome 5: Prefix = "fa-" and Name = "house"
-    /// </example>
     public string? Prefix { get; set; }
 
-    /// <summary>
-    /// Determines whether the icon has a valid name set.
-    /// </summary>
-    /// <returns><c>true</c> if the icon has a non-empty name; otherwise, <c>false</c>.</returns>
-    public bool HasValue() => Name.HasValue();
+
 
     /// <summary>
     /// Gets the CSS classes to render the icon.
@@ -106,7 +93,9 @@ public string GetCssClasses()
     /// Implicit conversion from string to <see cref="BitIconInfo"/>.
     /// This maintains backward compatibility with the existing string-based IconName parameter.
     /// </summary>
-    /// <param name="iconName">The icon name string.</param>
+    /// <param name="iconName">
+    /// The icon name string.
+    /// </param>
     public static implicit operator BitIconInfo?(string? iconName)
     {
         if (iconName is null) return null;
@@ -118,7 +107,9 @@ public string GetCssClasses()
     /// Implicit conversion from <see cref="BitIconInfo"/> to string.
     /// Returns the icon name for simple scenarios.
     /// </summary>
-    /// <param name="iconInfo">The icon info instance.</param>
+    /// <param name="iconInfo">
+    /// The icon info instance.
+    /// </param>
     public static implicit operator string?(BitIconInfo? iconInfo)
     {
         return iconInfo?.Name;
@@ -127,13 +118,12 @@ public string GetCssClasses()
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for an external/custom icon using the provided CSS classes directly.
     /// </summary>
-    /// <param name="cssClasses">The complete CSS class(es) to render the icon (e.g., "fa-solid fa-house" for FontAwesome 6).</param>
-    /// <returns>A new <see cref="BitIconInfo"/> instance configured for external icons.</returns>
-    /// <example>
-    /// FontAwesome 6: BitIconInfo.Css("fa-solid fa-house")
-    /// Material Icons: BitIconInfo.Css("material-icons home")
-    /// Bootstrap Icons: BitIconInfo.Css("bi bi-house")
-    /// </example>
+    /// <param name="cssClasses">
+    /// The complete CSS class(es) to render the icon (e.g., "fa-solid fa-house" for FontAwesome).
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for external icons.
+    /// </returns>
     public static BitIconInfo Css(string cssClasses)
     {
         return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
@@ -142,11 +132,12 @@ public static BitIconInfo Css(string cssClasses)
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for a built-in bit BlazorUI icon.
     /// </summary>
-    /// <param name="name">The bit BlazorUI icon name (e.g., "add").</param>
-    /// <returns>A new <see cref="BitIconInfo"/> instance configured for bit BlazorUI icons.</returns>
-    /// <example>
-    /// BitIconInfo.Bit("add")
-    /// </example>
+    /// <param name="name">
+    /// The bit BlazorUI icon name (e.g., "add").
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for bit BlazorUI icons.
+    /// </returns>
     public static BitIconInfo Bit(string name)
     {
         return new BitIconInfo(name, baseClass: "bit-icon", prefix: "bit-icon--");
@@ -155,12 +146,12 @@ public static BitIconInfo Bit(string name)
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for a FontAwesome icon.
     /// </summary>
-    /// <param name="icons">The FontAwesome icon classes (e.g., "fa-solid fa-house" or just "fa-house" with style parameter).</param>
-    /// <returns>A new <see cref="BitIconInfo"/> instance configured for FontAwesome icons.</returns>
-    /// <example>
-    /// BitIconInfo.Fa("solid house")
-    /// BitIconInfo.Fa("fa-brands fa-github")
-    /// </example>
+    /// <param name="icons">
+    /// The FontAwesome icon classes (e.g., "fa-solid fa-house", "solid house", or just "house" with style parameter).
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for FontAwesome icons.
+    /// </returns>
     public static BitIconInfo Fa(string icons)
     {
         var cssClasses = string.Join(' ', icons.Split(' ').Select(i => i.StartsWith("fa-") ? i : $"fa-{i}"));
@@ -171,12 +162,12 @@ public static BitIconInfo Fa(string icons)
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for a Material Icons icon.
     /// </summary>
-    /// <param name="iconName">The Material Icon name (e.g., "home", "search", "menu").</param>
-    /// <returns>A new <see cref="BitIconInfo"/> instance configured for Material Icons.</returns>
-    /// <example>
-    /// BitIconInfo.Material("home")
-    /// BitIconInfo.Material("search")
-    /// </example>
+    /// <param name="iconName">
+    /// The Material Icon name (e.g., "home", "search", "menu").
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for Material Icons.
+    /// </returns>
     public static BitIconInfo Material(string iconName)
     {
         return new BitIconInfo(iconName, baseClass: "material-icons", prefix: "");
@@ -185,12 +176,12 @@ public static BitIconInfo Material(string iconName)
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for a Bootstrap Icons icon.
     /// </summary>
-    /// <param name="iconName">The Bootstrap Icon name without the "bi-" prefix (e.g., "house", "search").</param>
-    /// <returns>A new <see cref="BitIconInfo"/> instance configured for Bootstrap Icons.</returns>
-    /// <example>
-    /// BitIconInfo.Bootstrap("house")
-    /// BitIconInfo.Bootstrap("search")
-    /// </example>
+    /// <param name="iconName">
+    /// The Bootstrap Icon name without the "bi-" prefix (e.g., "house", "search").
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for Bootstrap Icons.
+    /// </returns>
     public static BitIconInfo Bootstrap(string iconName)
     {
         return new BitIconInfo(iconName, baseClass: "bi", prefix: "bi-");
@@ -200,14 +191,20 @@ public static BitIconInfo Bootstrap(string iconName)
     /// Resolves the effective icon from either a <see cref="BitIconInfo"/> or an icon name string.
     /// The <paramref name="icon"/> parameter takes precedence when both are provided.
     /// </summary>
-    /// <param name="icon">The icon info instance, if provided.</param>
-    /// <param name="iconName">The icon name string for built-in icons, if provided.</param>
-    /// <returns>A <see cref="BitIconInfo"/> instance if either parameter has a value; otherwise, <c>null</c>.</returns>
+    /// <param name="icon">
+    /// The icon info instance, if provided.
+    /// </param>
+    /// <param name="iconName">
+    /// The icon name string for built-in icons, if provided.
+    /// </param>
+    /// <returns>
+    /// A <see cref="BitIconInfo"/> instance if either parameter has a value; otherwise, <c>null</c>.
+    /// </returns>
     /// <remarks>
     /// This method is intended for internal use by components to unify the handling of
     /// the <c>Icon</c> and <c>IconName</c> parameters.
     /// </remarks>
-    public static BitIconInfo? From(BitIconInfo? icon, string? iconName)
+    internal static BitIconInfo? From(BitIconInfo? icon, string? iconName)
     {
         if (icon is not null) return icon;
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
index 50c234d7e4..fa60bcfeff 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
@@ -25,11 +25,6 @@ public partial class BitIcon : BitComponentBase
     /// 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>
-    /// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
-    /// Material: Icon="BitIconInfo.Material("home")"
-    /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
-    /// </example>
     [Parameter, ResetClassBuilder]
     public BitIconInfo? Icon { get; set; }
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
index c20ad7be69..8b3d4b9ae0 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
@@ -6,7 +6,7 @@ namespace Bit.BlazorUI.Tests.Components.Utilities.Icon;
 public class BitIconInfoTests
 {
     [TestMethod]
-    public void Constructor_ShouldSetAllProperties()
+    public void ConstructorShouldSetAllProperties()
     {
         var iconInfo = new BitIconInfo("home", "fa", "fa-");
 
@@ -16,7 +16,7 @@ public void Constructor_ShouldSetAllProperties()
     }
 
     [TestMethod]
-    public void Constructor_WithOnlyName_ShouldSetNameOnly()
+    public void ConstructorWithOnlyNameShouldSetNameOnly()
     {
         var iconInfo = new BitIconInfo("home");
 
@@ -26,7 +26,7 @@ public void Constructor_WithOnlyName_ShouldSetNameOnly()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithBaseClassAndPrefix_ShouldReturnCorrectClasses()
+    public void GetCssClassesWithBaseClassAndPrefixShouldReturnCorrectClasses()
     {
         var iconInfo = new BitIconInfo("home", "fa", "fa-");
 
@@ -36,7 +36,7 @@ public void GetCssClasses_WithBaseClassAndPrefix_ShouldReturnCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithBaseClassOnly_ShouldReturnBaseClassAndName()
+    public void GetCssClassesWithBaseClassOnlyShouldReturnBaseClassAndName()
     {
         var iconInfo = new BitIconInfo("home", "material-icons", "");
 
@@ -46,7 +46,7 @@ public void GetCssClasses_WithBaseClassOnly_ShouldReturnBaseClassAndName()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithPrefixOnly_ShouldReturnPrefixedName()
+    public void GetCssClassesWithPrefixOnlyShouldReturnPrefixedName()
     {
         var iconInfo = new BitIconInfo("home", "", "icon-");
 
@@ -56,19 +56,7 @@ public void GetCssClasses_WithPrefixOnly_ShouldReturnPrefixedName()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithNameOnly_ShouldUseDefaultBitIconClasses()
-    {
-        var iconInfo = new BitIconInfo("home");
-
-        var result = iconInfo.GetCssClasses();
-
-        // When BaseClass is null, it defaults to "bit-icon"
-        // When Prefix is null, it defaults to "bit-icon--"
-        Assert.AreEqual("bit-icon bit-icon--home", result);
-    }
-
-    [TestMethod]
-    public void GetCssClasses_WithEmptyBaseClassAndPrefix_ShouldReturnNameOnly()
+    public void GetCssClassesWithEmptyBaseClassAndPrefixShouldReturnNameOnly()
     {
         var iconInfo = new BitIconInfo("home", "", "");
 
@@ -77,42 +65,10 @@ public void GetCssClasses_WithEmptyBaseClassAndPrefix_ShouldReturnNameOnly()
         Assert.AreEqual("home", result);
     }
 
-    [TestMethod]
-    public void HasValue_WithName_ShouldReturnTrue()
-    {
-        var iconInfo = new BitIconInfo("home");
-
-        Assert.IsTrue(iconInfo.HasValue());
-    }
-
-    [TestMethod]
-    public void HasValue_WithEmptyName_ShouldReturnFalse()
-    {
-        var iconInfo = new BitIconInfo("");
-
-        Assert.IsFalse(iconInfo.HasValue());
-    }
-
-    [TestMethod]
-    public void HasValue_WithNullName_ShouldReturnFalse()
-    {
-        var iconInfo = new BitIconInfo(null!);
-
-        Assert.IsFalse(iconInfo.HasValue());
-    }
-
-    [TestMethod]
-    public void HasValue_WithWhitespaceName_ShouldReturnFalse()
-    {
-        var iconInfo = new BitIconInfo("   ");
-
-        Assert.IsFalse(iconInfo.HasValue());
-    }
-
     // Factory Method Tests
 
     [TestMethod]
-    public void Css_ShouldCreateIconInfoWithEmptyBaseClassAndPrefix()
+    public void CssShouldCreateIconInfoWithEmptyBaseClassAndPrefix()
     {
         var iconInfo = BitIconInfo.Css("fa-solid fa-home");
 
@@ -123,7 +79,7 @@ public void Css_ShouldCreateIconInfoWithEmptyBaseClassAndPrefix()
     }
 
     [TestMethod]
-    public void FontAwesome_ShouldCreateIconInfoForFontAwesome6()
+    public void FontAwesomeShouldCreateIconInfoForFontAwesome6()
     {
         var iconInfo = BitIconInfo.Fa("fa-solid fa-home");
 
@@ -134,7 +90,7 @@ public void FontAwesome_ShouldCreateIconInfoForFontAwesome6()
     }
 
     [TestMethod]
-    public void FontAwesome_ShouldHandleBrandIcons()
+    public void FontAwesomeShouldHandleBrandIcons()
     {
         var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
 
@@ -143,7 +99,7 @@ public void FontAwesome_ShouldHandleBrandIcons()
     }
 
     [TestMethod]
-    public void Material_ShouldCreateMaterialIconInfo()
+    public void MaterialShouldCreateMaterialIconInfo()
     {
         var iconInfo = BitIconInfo.Material("home");
 
@@ -154,7 +110,7 @@ public void Material_ShouldCreateMaterialIconInfo()
     }
 
     [TestMethod]
-    public void Material_ShouldHandleVariousIconNames()
+    public void MaterialShouldHandleVariousIconNames()
     {
         var iconInfo = BitIconInfo.Material("settings");
 
@@ -164,7 +120,7 @@ public void Material_ShouldHandleVariousIconNames()
     }
 
     [TestMethod]
-    public void Bootstrap_ShouldCreateBootstrapIconInfo()
+    public void BootstrapShouldCreateBootstrapIconInfo()
     {
         var iconInfo = BitIconInfo.Bootstrap("check-circle");
 
@@ -175,7 +131,7 @@ public void Bootstrap_ShouldCreateBootstrapIconInfo()
     }
 
     [TestMethod]
-    public void Bootstrap_ShouldHandleVariousIconNames()
+    public void BootstrapShouldHandleVariousIconNames()
     {
         var iconInfo = BitIconInfo.Bootstrap("house");
 
@@ -188,7 +144,7 @@ public void Bootstrap_ShouldHandleVariousIconNames()
     // Implicit Conversion Tests
 
     [TestMethod]
-    public void ImplicitConversion_FromString_ShouldCreateIconInfo()
+    public void ImplicitConversionFromStringShouldCreateIconInfo()
     {
         BitIconInfo iconInfo = "home";
 
@@ -198,7 +154,7 @@ public void ImplicitConversion_FromString_ShouldCreateIconInfo()
     }
 
     [TestMethod]
-    public void ImplicitConversion_FromNullString_ShouldReturnNull()
+    public void ImplicitConversionFromNullStringShouldReturnNull()
     {
         string? nullString = null;
         BitIconInfo? iconInfo = nullString;
@@ -207,7 +163,7 @@ public void ImplicitConversion_FromNullString_ShouldReturnNull()
     }
 
     [TestMethod]
-    public void ImplicitConversion_ToString_ShouldReturnName()
+    public void ImplicitConversionToStringShouldReturnName()
     {
         var iconInfo = new BitIconInfo("home", "fa", "fa-");
 
@@ -217,7 +173,7 @@ public void ImplicitConversion_ToString_ShouldReturnName()
     }
 
     [TestMethod]
-    public void ImplicitConversion_FromNullIconInfo_ShouldReturnNull()
+    public void ImplicitConversionFromNullIconInfoShouldReturnNull()
     {
         BitIconInfo? iconInfo = null;
 
@@ -229,7 +185,7 @@ public void ImplicitConversion_FromNullIconInfo_ShouldReturnNull()
     // CSS class generation tests
 
     [TestMethod]
-    public void GetCssClasses_FontAwesome6_SolidIcon_ShouldGenerateCorrectClasses()
+    public void GetCssClassesFontAwesome6SolidIconShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Fa("fa-solid fa-user");
 
@@ -237,7 +193,7 @@ public void GetCssClasses_FontAwesome6_SolidIcon_ShouldGenerateCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_FontAwesome6_RegularIcon_ShouldGenerateCorrectClasses()
+    public void GetCssClassesFontAwesome6RegularIconShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Fa("fa-regular fa-heart");
 
@@ -245,7 +201,7 @@ public void GetCssClasses_FontAwesome6_RegularIcon_ShouldGenerateCorrectClasses(
     }
 
     [TestMethod]
-    public void GetCssClasses_FontAwesome6_BrandIcon_ShouldGenerateCorrectClasses()
+    public void GetCssClassesFontAwesome6BrandIconShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
 
@@ -253,7 +209,7 @@ public void GetCssClasses_FontAwesome6_BrandIcon_ShouldGenerateCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_Bootstrap_ShouldGenerateCorrectClasses()
+    public void GetCssClassesBootstrapShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Bootstrap("arrow-right");
 
@@ -261,7 +217,7 @@ public void GetCssClasses_Bootstrap_ShouldGenerateCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_Material_ShouldGenerateCorrectClasses()
+    public void GetCssClassesMaterialShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Material("favorite");
 
@@ -269,7 +225,7 @@ public void GetCssClasses_Material_ShouldGenerateCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_CustomCss_ShouldGenerateCorrectClasses()
+    public void GetCssClassesCustomCssShouldGenerateCorrectClasses()
     {
         var iconInfo = BitIconInfo.Css("my-custom-icon-class");
 
@@ -277,7 +233,7 @@ public void GetCssClasses_CustomCss_ShouldGenerateCorrectClasses()
     }
 
     [TestMethod]
-    public void GetCssClasses_CustomIconWithConstructor_ShouldGenerateCorrectClasses()
+    public void GetCssClassesCustomIconWithConstructorShouldGenerateCorrectClasses()
     {
         var iconInfo = new BitIconInfo("custom-icon", "my-icons", "ico-");
 
@@ -287,7 +243,7 @@ public void GetCssClasses_CustomIconWithConstructor_ShouldGenerateCorrectClasses
     // Edge Cases
 
     [TestMethod]
-    public void GetCssClasses_WithEmptyBaseClass_ShouldHandleCorrectly()
+    public void GetCssClassesWithEmptyBaseClassShouldHandleCorrectly()
     {
         var iconInfo = new BitIconInfo("home", "", "icon-");
 
@@ -297,7 +253,7 @@ public void GetCssClasses_WithEmptyBaseClass_ShouldHandleCorrectly()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithEmptyPrefix_ShouldHandleCorrectly()
+    public void GetCssClassesWithEmptyPrefixShouldHandleCorrectly()
     {
         var iconInfo = new BitIconInfo("home", "icons", "");
 
@@ -307,7 +263,7 @@ public void GetCssClasses_WithEmptyPrefix_ShouldHandleCorrectly()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithAllEmptyStrings_ShouldReturnEmptyString()
+    public void GetCssClassesWithAllEmptyStringsShouldReturnEmptyString()
     {
         var iconInfo = new BitIconInfo("", "", "");
 
@@ -317,7 +273,7 @@ public void GetCssClasses_WithAllEmptyStrings_ShouldReturnEmptyString()
     }
 
     [TestMethod]
-    public void GetCssClasses_WithSpecialCharactersInName_ShouldHandleCorrectly()
+    public void GetCssClassesWithSpecialCharactersInNameShouldHandleCorrectly()
     {
         var iconInfo = BitIconInfo.Fa("fa-solid fa-arrow-circle-right");
 
@@ -325,7 +281,7 @@ public void GetCssClasses_WithSpecialCharactersInName_ShouldHandleCorrectly()
     }
 
     [TestMethod]
-    public void GetCssClasses_Bootstrap_WithHyphenatedName_ShouldHandleCorrectly()
+    public void GetCssClassesBootstrapWithHyphenatedNameShouldHandleCorrectly()
     {
         var iconInfo = BitIconInfo.Bootstrap("check-circle-fill");
 
@@ -333,18 +289,17 @@ public void GetCssClasses_Bootstrap_WithHyphenatedName_ShouldHandleCorrectly()
     }
 
     [TestMethod]
-    public void DefaultConstructor_ShouldCreateEmptyIconInfo()
+    public void DefaultConstructorShouldCreateEmptyIconInfo()
     {
         var iconInfo = new BitIconInfo();
 
         Assert.IsNull(iconInfo.Name);
         Assert.IsNull(iconInfo.BaseClass);
         Assert.IsNull(iconInfo.Prefix);
-        Assert.IsFalse(iconInfo.HasValue());
     }
 
     [TestMethod]
-    public void GetCssClasses_WithNullName_ShouldReturnEmptyString()
+    public void GetCssClassesWithNullNameShouldReturnEmptyString()
     {
         var iconInfo = new BitIconInfo();
 

From a57357025494d77719bef447bfcdf1f64f6ac928 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 4 Jan 2026 23:32:13 +0330
Subject: [PATCH 3/6] improve docs

---
 .../Utilities/Icon/BitIcon.razor.cs           | 31 +++++++++++--------
 .../Utilities/Icon/BitIconDemo.razor.cs       | 10 +++---
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
index fa60bcfeff..b30740f74f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
@@ -1,41 +1,46 @@
 namespace Bit.BlazorUI;
 
 /// <summary>
-/// An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications.
+/// A component for displaying icons that enhance visual communication and user experience.
+/// Supports both built-in Fluent UI icons and external icon libraries.
 /// </summary>
 public partial class BitIcon : BitComponentBase
 {
     /// <summary>
-    /// The general color of the icon.
+    /// Specifies the color theme of the icon.
+    /// Default value is <see cref="BitColor.Primary"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
     /// <summary>
-    /// The icon name for the icon shown from the built-in Fluent UI icons.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public string? IconName { get; set; }
-
-    /// <summary>
-    /// The icon to display using custom CSS classes for external icon libraries.
+    /// Specifies the icon configuration for rendering icons from external icon libraries using custom CSS classes.
     /// 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.
+    /// Use this property for external icon libraries such as FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use the <see cref="IconName"/> property instead.
     /// </remarks>
     [Parameter, ResetClassBuilder]
     public BitIconInfo? Icon { get; set; }
 
     /// <summary>
-    /// The size of the icon.
+    /// Specifies the name of the icon from the built-in Fluent UI icon library.
+    /// This property is ignored when <see cref="Icon"/> is set.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public string? IconName { get; set; }
+
+    /// <summary>
+    /// Specifies the size of the icon.
+    /// Default value is <see cref="BitSize.Medium"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitSize? Size { get; set; }
 
     /// <summary>
-    /// The visual variant of the icon.
+    /// Specifies the visual styling variant of the icon.
+    /// Default value is <see cref="BitVariant.Text"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitVariant? Variant { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
index dcbd599dfc..5f9007b84c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
@@ -9,7 +9,7 @@ public partial class BitIconDemo
             Name = "Color",
             Type = "BitColor?",
             DefaultValue = "null",
-            Description = "The general color of the icon.",
+            Description = "Specifies the color theme of the icon. Default value is BitColor.Primary.",
             LinkType = LinkType.Link,
             Href = "#color-enum",
         },
@@ -18,14 +18,14 @@ public partial class BitIconDemo
             Name = "Icon",
             Type = "BitIconInfo?",
             DefaultValue = "null",
-            Description = "The icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.",
+            Description = "Specifies the icon configuration for rendering icons from external icon libraries using custom CSS classes. Takes precedence over IconName when both are set.",
         },
         new()
         {
             Name = "IconName",
             Type = "string",
             DefaultValue = "",
-            Description = "The icon name for the icon shown from built-in Fluent UI icons.",
+            Description = "Specifies the name of the icon from the built-in Fluent UI icon library. This property is ignored when Icon is set.",
             LinkType = LinkType.Link,
             Href = "/iconography",
         },
@@ -34,7 +34,7 @@ public partial class BitIconDemo
             Name = "Size",
             Type = "BitSize?",
             DefaultValue = "null",
-            Description = "The size of the icon.",
+            Description = "Specifies the size of the icon. Default value is BitSize.Medium.",
             LinkType = LinkType.Link,
             Href = "#icon-size-enum",
         },
@@ -43,7 +43,7 @@ public partial class BitIconDemo
             Name = "Variant",
             Type = "BitVariant?",
             DefaultValue = "null",
-            Description = "The visual variant of the icon.",
+            Description = "Specifies the visual styling variant of the icon. Default value is BitVariant.Text.",
             LinkType = LinkType.Link,
             Href = "#variant-enum",
         },

From c3edc7e9eeb4fd79beab11493762d028c0279a9d Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 5 Jan 2026 00:20:27 +0330
Subject: [PATCH 4/6] improve further

---
 .../Bit.BlazorUI/Components/BitIconInfo.cs    | 16 +--
 .../Utilities/Icon/BitIcon.razor.cs           |  2 +-
 .../Utilities/Icon/BitIconDemo.razor          | 99 +++++++++++++++----
 .../Utilities/Icon/BitIconDemo.razor.cs       | 19 +++-
 .../Utilities/Icon/BitIconInfoTests.cs        | 37 +------
 5 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
index e539272a20..84409d2c6f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
@@ -159,20 +159,6 @@ public static BitIconInfo Fa(string icons)
         return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
     }
 
-    /// <summary>
-    /// Creates a <see cref="BitIconInfo"/> for a Material Icons icon.
-    /// </summary>
-    /// <param name="iconName">
-    /// The Material Icon name (e.g., "home", "search", "menu").
-    /// </param>
-    /// <returns>
-    /// A new <see cref="BitIconInfo"/> instance configured for Material Icons.
-    /// </returns>
-    public static BitIconInfo Material(string iconName)
-    {
-        return new BitIconInfo(iconName, baseClass: "material-icons", prefix: "");
-    }
-
     /// <summary>
     /// Creates a <see cref="BitIconInfo"/> for a Bootstrap Icons icon.
     /// </summary>
@@ -182,7 +168,7 @@ public static BitIconInfo Material(string iconName)
     /// <returns>
     /// A new <see cref="BitIconInfo"/> instance configured for Bootstrap Icons.
     /// </returns>
-    public static BitIconInfo Bootstrap(string iconName)
+    public static BitIconInfo Bi(string iconName)
     {
         return new BitIconInfo(iconName, baseClass: "bi", prefix: "bi-");
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
index b30740f74f..bc2a2064eb 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
@@ -18,7 +18,7 @@ public partial class BitIcon : BitComponentBase
     /// Takes precedence over <see cref="IconName"/> when both are set.
     /// </summary>
     /// <remarks>
-    /// Use this property for external icon libraries such as FontAwesome, Material Icons, or Bootstrap Icons.
+    /// Use this property for external icon libraries such as FontAwesome, or Bootstrap Icons.
     /// For built-in Fluent UI icons, use the <see cref="IconName"/> property instead.
     /// </remarks>
     [Parameter, ResetClassBuilder]
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
index 0b918d2421..9a930c399f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
@@ -16,8 +16,11 @@
         <BitIcon IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon IconName="@BitIconName.Pinned" />
+
         <br /><br /><br /><br />
-        <div>Disabled</div><br />
+
+        <div>Disabled</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" IsEnabled="false" />
         &nbsp;
         <BitIcon IconName="@BitIconName.Bus" IsEnabled="false" />
@@ -26,69 +29,100 @@
     </DemoExample>
 
     <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
-        <div>Fill</div><br />
+        <div>Fill</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Fill" />
+
         <br /><br /><br /><br />
-        <div>Outline</div><br />
+
+        <div>Outline</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Outline" />
+
         <br /><br /><br /><br />
-        <div>Text (default)</div><br />
+
+        <div>Text (default)</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Text" />
     </DemoExample>
 
     <DemoExample Title="Color" RazorCode="@example3RazorCode" Id="example3">
         <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
+        
         <br /><br /><br />
-        <div>Primary</div><br />
+
+        <div>Primary</div>
+        <br />
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Pinned" />
+
         <br /><br /><br /><br />
-        <div>Secondary</div><br />
+        
+        <div>Secondary</div>
+        <br />
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Tertiary</div><br />
+
+        <div>Tertiary</div>
+        <br />
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Info</div><br />
+
+        <div>Info</div>
+        <br />
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Success</div><br />
+
+        <div>Success</div>
+        <br />
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Warning</div><br />
+        
+        <div>Warning</div>
+        <br />
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>SevereWarning</div><br />
+        
+        <div>SevereWarning</div>
+        <br />
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Error</div><br />
+        
+        <div>Error</div>
+        <br />
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Bus" />
@@ -97,13 +131,14 @@
     </DemoExample>
 
     <DemoExample Title="External Icons" RazorCode="@example4RazorCode" Id="example4">
-        <div>Use icons from external libraries like FontAwesome with the <b>Icon</b> parameter.</div>
+        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
 
-        <br />
-        <br />
+        <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 />
         <BitIcon Icon="@("fa-solid fa-house")" Size="BitSize.Large" />
         &nbsp;
         <BitIcon Icon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Error" />
@@ -111,24 +146,45 @@
         <BitIcon Icon="@BitIconInfo.Fa("fa-brands fa-github")" Size="BitSize.Large" />
         &nbsp;
         <BitIcon Icon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Secondary" />
+        
+        <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 Icons</div>
+        <br />
+        <BitIcon Icon="@("bi bi-house-fill")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Css("bi bi-heart-fill")" Color="BitColor.Error" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Bi("github")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Bi("gear-fill")" Color="BitColor.Secondary" />
     </DemoExample>
 
     <DemoExample Title="Size" RazorCode="@example5RazorCode" Id="example5">
-        <div>Small</div><br />
+        <div>Small</div>
+        <br />
         <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Medium</div><br />
+
+        <div>Medium</div>
+        <br />
         <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Large</div><br />
+        
+        <div>Large</div>
+        <br />
         <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
@@ -138,9 +194,12 @@
 
     <DemoExample Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <div>
-            <BitIcon IconName="@BitIconName.Accept" Size="BitSize.Large"
+            <BitIcon Size="BitSize.Large"
+                     IconName="@BitIconName.Accept" 
                      Style="background-color: brown; border-radius: 4px" />
-            <BitIcon IconName="@BitIconName.Accept" Class="icon-class" />
+
+            <BitIcon Class="icon-class"
+                     IconName="@BitIconName.Accept" />
         </div>
     </DemoExample>
 </DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
index 5f9007b84c..a4e3cfd16a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
@@ -271,11 +271,19 @@ public partial class BitIconDemo
 
     private readonly string example4RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-        
+
 <BitIcon Icon=""@(""fa-solid fa-house"")"" Size=""BitSize.Large"" />
 <BitIcon Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" Color=""BitColor.Error"" />
 <BitIcon Icon=""@BitIconInfo.Fa(""fa-brands fa-github"")"" Size=""BitSize.Large"" />
-<BitIcon Icon=""@BitIconInfo.Fa(""solid rocket"")"" Color=""BitColor.Secondary"" />";
+<BitIcon Icon=""@BitIconInfo.Fa(""solid rocket"")"" Color=""BitColor.Secondary"" />
+
+
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitIcon Icon=""@(""bi bi-house-fill"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Css(""bi bi-heart-fill"")"" Color=""BitColor.Error"" />
+<BitIcon Icon=""@BitIconInfo.Bi(""github"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Bi(""gear-fill"")"" Color=""BitColor.Secondary"" />";
 
     private readonly string example5RazorCode = @"
 <BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Accept"" />
@@ -300,7 +308,10 @@ public partial class BitIconDemo
     }
 </style>
 
-<BitIcon IconName=""@BitIconName.Accept"" Size=""BitSize.Large""
+<BitIcon Size=""BitSize.Large""
+         IconName=""@BitIconName.Accept"" 
          Style=""background-color: brown; border-radius: 4px"" />
-<BitIcon IconName=""@BitIconName.Accept"" Class=""icon-class"" />";
+
+<BitIcon Class=""icon-class""
+         IconName=""@BitIconName.Accept"" />";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
index 8b3d4b9ae0..ecb17a6cf4 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
@@ -98,31 +98,10 @@ public void FontAwesomeShouldHandleBrandIcons()
         Assert.AreEqual("fa-brands fa-github", iconInfo.GetCssClasses());
     }
 
-    [TestMethod]
-    public void MaterialShouldCreateMaterialIconInfo()
-    {
-        var iconInfo = BitIconInfo.Material("home");
-
-        Assert.AreEqual("home", iconInfo.Name);
-        Assert.AreEqual("material-icons", iconInfo.BaseClass);
-        Assert.AreEqual("", iconInfo.Prefix);
-        Assert.AreEqual("material-icons home", iconInfo.GetCssClasses());
-    }
-
-    [TestMethod]
-    public void MaterialShouldHandleVariousIconNames()
-    {
-        var iconInfo = BitIconInfo.Material("settings");
-
-        Assert.AreEqual("settings", iconInfo.Name);
-        Assert.AreEqual("material-icons", iconInfo.BaseClass);
-        Assert.AreEqual("material-icons settings", iconInfo.GetCssClasses());
-    }
-
     [TestMethod]
     public void BootstrapShouldCreateBootstrapIconInfo()
     {
-        var iconInfo = BitIconInfo.Bootstrap("check-circle");
+        var iconInfo = BitIconInfo.Bi("check-circle");
 
         Assert.AreEqual("check-circle", iconInfo.Name);
         Assert.AreEqual("bi", iconInfo.BaseClass);
@@ -133,7 +112,7 @@ public void BootstrapShouldCreateBootstrapIconInfo()
     [TestMethod]
     public void BootstrapShouldHandleVariousIconNames()
     {
-        var iconInfo = BitIconInfo.Bootstrap("house");
+        var iconInfo = BitIconInfo.Bi("house");
 
         Assert.AreEqual("house", iconInfo.Name);
         Assert.AreEqual("bi", iconInfo.BaseClass);
@@ -211,19 +190,11 @@ public void GetCssClassesFontAwesome6BrandIconShouldGenerateCorrectClasses()
     [TestMethod]
     public void GetCssClassesBootstrapShouldGenerateCorrectClasses()
     {
-        var iconInfo = BitIconInfo.Bootstrap("arrow-right");
+        var iconInfo = BitIconInfo.Bi("arrow-right");
 
         Assert.AreEqual("bi bi-arrow-right", iconInfo.GetCssClasses());
     }
 
-    [TestMethod]
-    public void GetCssClassesMaterialShouldGenerateCorrectClasses()
-    {
-        var iconInfo = BitIconInfo.Material("favorite");
-
-        Assert.AreEqual("material-icons favorite", iconInfo.GetCssClasses());
-    }
-
     [TestMethod]
     public void GetCssClassesCustomCssShouldGenerateCorrectClasses()
     {
@@ -283,7 +254,7 @@ public void GetCssClassesWithSpecialCharactersInNameShouldHandleCorrectly()
     [TestMethod]
     public void GetCssClassesBootstrapWithHyphenatedNameShouldHandleCorrectly()
     {
-        var iconInfo = BitIconInfo.Bootstrap("check-circle-fill");
+        var iconInfo = BitIconInfo.Bi("check-circle-fill");
 
         Assert.AreEqual("bi bi-check-circle-fill", iconInfo.GetCssClasses());
     }

From c5dee626b716ee98ad7f3fa04d9f242c425cfda2 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 5 Jan 2026 00:24:11 +0330
Subject: [PATCH 5/6] improve demo docs

---
 .../Utilities/Icon/BitIconDemo.razor          |  1 +
 .../Utilities/Icon/BitIconDemo.razor.cs       | 35 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
index 9a930c399f..f834edbba0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
@@ -7,6 +7,7 @@
 <DemoPage Name="Icon"
           Description="An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications."
           Parameters="componentParameters"
+          SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
           GitHubUrl="Utilities/Icon/BitIcon.razor"
           GitHubDemoUrl="Utilities/Icon/BitIconDemo.razor">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
index a4e3cfd16a..fa28a82786 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
@@ -19,6 +19,8 @@ public partial class BitIconDemo
             Type = "BitIconInfo?",
             DefaultValue = "null",
             Description = "Specifies the icon configuration for rendering icons from external icon libraries using custom CSS classes. Takes precedence over IconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
         },
         new()
         {
@@ -49,6 +51,39 @@ public partial class BitIconDemo
         },
     ];
 
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        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<ComponentSubEnum> componentSubEnums =
     [
         new()

From b9d29eb976854b4e75ffcd12a3d2778df0af56e5 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 5 Jan 2026 13:26:47 +0330
Subject: [PATCH 6/6] resolve review comments

---
 .../Bit.BlazorUI/Components/BitIconInfo.cs    |   7 +-
 .../Utilities/Icon/BitIconInfoTests.cs        | 145 ++++++++++++++++++
 2 files changed, 149 insertions(+), 3 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
index 84409d2c6f..7558101df7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
@@ -154,7 +154,8 @@ public static BitIconInfo Bit(string name)
     /// </returns>
     public static BitIconInfo Fa(string icons)
     {
-        var cssClasses = string.Join(' ', icons.Split(' ').Select(i => i.StartsWith("fa-") ? i : $"fa-{i}"));
+        var cssClasses = string.Join(' ', icons.Split(' ', StringSplitOptions.RemoveEmptyEntries)
+                                               .Select(i => i.StartsWith("fa-") ? i : $"fa-{i}"));
 
         return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
     }
@@ -187,10 +188,10 @@ public static BitIconInfo Bi(string iconName)
     /// A <see cref="BitIconInfo"/> instance if either parameter has a value; otherwise, <c>null</c>.
     /// </returns>
     /// <remarks>
-    /// This method is intended for internal use by components to unify the handling of
+    /// This method is useful for components to unify the handling of
     /// the <c>Icon</c> and <c>IconName</c> parameters.
     /// </remarks>
-    internal static BitIconInfo? From(BitIconInfo? icon, string? iconName)
+    public static BitIconInfo? From(BitIconInfo? icon, string? iconName)
     {
         if (icon is not null) return icon;
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
index ecb17a6cf4..d391926a64 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
@@ -278,4 +278,149 @@ public void GetCssClassesWithNullNameShouldReturnEmptyString()
 
         Assert.AreEqual("", result);
     }
+
+    // Bit Factory Method Tests
+
+    [TestMethod]
+    public void BitShouldCreateIconInfoForBitBlazorUIIcons()
+    {
+        var iconInfo = BitIconInfo.Bit("Add");
+
+        Assert.AreEqual("Add", iconInfo.Name);
+        Assert.AreEqual("bit-icon", iconInfo.BaseClass);
+        Assert.AreEqual("bit-icon--", iconInfo.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--Add", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void BitShouldHandleVariousIconNames()
+    {
+        var iconInfo = BitIconInfo.Bit("ChevronDown");
+
+        Assert.AreEqual("ChevronDown", iconInfo.Name);
+        Assert.AreEqual("bit-icon", iconInfo.BaseClass);
+        Assert.AreEqual("bit-icon--", iconInfo.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--ChevronDown", iconInfo.GetCssClasses());
+    }
+
+    // From Method Tests
+
+    [TestMethod]
+    public void FromShouldReturnIconWhenIconIsProvided()
+    {
+        var icon = BitIconInfo.Fa("fa-solid fa-home");
+
+        var result = BitIconInfo.From(icon, "Add");
+
+        Assert.AreSame(icon, result);
+    }
+
+    [TestMethod]
+    public void FromShouldCreateBitIconWhenOnlyIconNameIsProvided()
+    {
+        var result = BitIconInfo.From(null, "Add");
+
+        Assert.IsNotNull(result);
+        Assert.AreEqual("Add", result.Name);
+        Assert.AreEqual("bit-icon", result.BaseClass);
+        Assert.AreEqual("bit-icon--", result.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--Add", result.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FromShouldReturnNullWhenBothParametersAreNull()
+    {
+        var result = BitIconInfo.From(null, null);
+
+        Assert.IsNull(result);
+    }
+
+    [TestMethod]
+    public void FromShouldReturnNullWhenIconNameIsEmpty()
+    {
+        var result = BitIconInfo.From(null, "");
+
+        Assert.IsNull(result);
+    }
+
+    [TestMethod]
+    public void FromShouldPrioritizeIconOverIconName()
+    {
+        var icon = BitIconInfo.Bi("house");
+
+        var result = BitIconInfo.From(icon, "Add");
+
+        Assert.AreSame(icon, result);
+        Assert.AreEqual("bi bi-house", result?.GetCssClasses());
+    }
+
+    // Null BaseClass and Prefix Tests
+
+    [TestMethod]
+    public void GetCssClassesWithNullBaseClassAndNullPrefixShouldReturnNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithNullBaseClassAndPrefixShouldReturnPrefixedName()
+    {
+        var iconInfo = new BitIconInfo("home", null, "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithBaseClassAndNullPrefixShouldReturnBaseClassAndName()
+    {
+        var iconInfo = new BitIconInfo("home", "material-icons", null);
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("material-icons home", result);
+    }
+
+    // FontAwesome Shorthand Tests
+
+    [TestMethod]
+    public void FontAwesomeShouldAddFaPrefixWhenMissing()
+    {
+        var iconInfo = BitIconInfo.Fa("solid home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldNotAddFaPrefixWhenAlreadyPresent()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldHandleMixedPrefixes()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldHandleExtraSpaces()
+    {
+        var iconInfo = BitIconInfo.Fa("  solid   home  ");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
 }