Add new Icon parameter to BitToggleButton (#12022)

[msynk]

closes #12022

Summary by CodeRabbit

• New Features
  • Added support for external icon libraries in BitToggleButton component via new Icon, OffIcon, and OnIcon parameters.
  • External icon properties take precedence over built-in Fluent UI icon names.
  • Updated demo with Font Awesome integration example showcasing external icon usage.

[coderabbitai]

Walkthrough

This PR introduces external icon library support to the BitToggleButton component by adding new public parameters (Icon, OffIcon, OnIcon) that accept BitIconInfo objects, with fallback logic to existing icon name properties. Demo pages are updated to showcase FontAwesome integration.

Changes

Cohort / File(s)	Summary
Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor, src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.razor.cs	Added public parameters Icon, OffIcon, OnIcon for external icon libraries with precedence over corresponding Name properties. Replaced GetIconName() method with GetIcon() returning BitIconInfo? with three-tier fallback logic: checked-state icons → unchecked-state icons → generic icons.
Demo Pages src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.cs, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs	Expanded demo with external icons showcase using FontAwesome. Added Icon, OffIcon, OnIcon parameters to demo component. Reorganized examples: renamed "Style & Class" to "External Icons" (example11), updated subsequent example IDs, and included sample code demonstrating external icon usage with color variants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Buttons now don a fancier coat,
External icons make hearts float,
FontAwesome's fancy, Fluent's still great,
Toggle with style—what a state!
Icons galore, precedence clear,
The toggle's renaissance is here! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a new Icon parameter to the BitToggleButton component.
Linked Issues check	✅ Passed	The PR successfully implements support for external icons in BitToggleButton through new Icon, OffIcon, and OnIcon parameters with fallback to existing Name properties.
Out of Scope Changes check	✅ Passed	All changes are directly related to enabling external icon support in BitToggleButton; demo updates showcase the new functionality and pose no scope issues.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate failed

Failed conditions
10.9% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor`:
- Around line 289-319: The demo mixes raw string implicit-conversion for the
Icon parameter with uses of BitIconInfo helpers; update the first
BitToggleButton so its Icon uses BitIconInfo.Css("fa-solid fa-microphone") (same
style as the other examples) to keep consistency across BitToggleButton usages
and make the intent explicit; ensure you reference the Icon parameter on
BitToggleButton and use BitIconInfo.Css (or BitIconInfo.Fa where appropriate)
for external icons throughout this DemoExample.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs`:
- Around line 196-211: Replace the raw string icon usages with the BitIconInfo
helpers to match existing examples: change the BitToggleButton using
Icon="@("fa-solid fa-microphone")" to use BitIconInfo.Css("fa-solid
fa-microphone"), and update any occurrences where BitIconInfo.Fa(...) and
BitIconInfo.Css(...) are inconsistently mixed (e.g., the first Icon and any
other plain-string icons) so all icons in the snippet use BitIconInfo.Css(...)
or BitIconInfo.Fa(...) consistently with the other BitToggleButton examples.