From 3e70f9fab008da37b0b2d01d0430857327a0a5fb Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 4 Jun 2026 21:04:34 +0530
Subject: [PATCH 1/3] 1029436: Updated the Icons UG Documentation
---
blazor/appearance/icons.md | 150 ++++++++++++------
.../images/icons/htmlattributes-icon.webp | Bin 0 -> 1434 bytes
2 files changed, 103 insertions(+), 47 deletions(-)
create mode 100644 blazor/appearance/images/icons/htmlattributes-icon.webp
diff --git a/blazor/appearance/icons.md b/blazor/appearance/icons.md
index 0ce8037d8b..26457cd34d 100644
--- a/blazor/appearance/icons.md
+++ b/blazor/appearance/icons.md
@@ -1,7 +1,7 @@
---
layout: post
title: Blazor icons library - Syncfusion
-description: Learn how to use the Syncfusion Blazor icons with SfIcon and e-icons, set sizes and tooltips, customize appearance, and integrate third-party icon fonts.
+description: Learn how to use the Blazor Icon component with SfIcon and e-icons, set sizes and tooltips, customize appearance, and integrate with other Blazor components.
platform: Blazor
control: Common
documentation: ug
@@ -9,22 +9,43 @@ documentation: ug
# Blazor icons library
-The Syncfusion® Blazor library provides a set of base64-formatted font icons used across Syncfusion® Blazor components. Icons can be used via the `SfIcon` component or the `e-icons` CSS class.
+The Syncfusion® Blazor library provides a set of base64-formatted font icons used across [Blazor components](https://www.syncfusion.com/blazor-components). Icons can be used via the `SfIcon` component or the `e-icons` CSS class.
Watch a quick-start video for the Blazor Icon component:
{% youtube
"youtube:https://www.youtube.com/watch?v=H1nQCAHzKZ0"%}
+## Prerequisites
+
+Before using the Blazor Icon component, set up your Blazor application by following the [Blazor Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) guide.
+
+Next, install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) NuGet package using the following command.
+
+{% tabs %}
+{% highlight bash tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% highlight bash tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
+
## Icon component
-Syncfusion® Icon component provides support to render predefined Syncfusion® icons or custom font icons.
+The Blazor Icon component provides support for rendering predefined Blazor icons or custom font icons.
-Refer to the [Getting started with Syncfusion Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) guide for installation and common configuration.
+The following code example shows how to render built-in Blazor icons from predefined [IconName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.IconName.html) options by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Name) property in the `SfIcon` tag.
-The following code example shows the rendering of built-in Syncfusion® icons from predefined [IconName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.IconName.html) options using [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Name) property by defining them in `SfIcon` tag.
+{% tabs %}
+{% highlight razor %}
-```cshtml
@using Syncfusion.Blazor.Buttons
7I(|P9<|=aX~1%=9#UVK%S$gwT2yqm=l$Z1Q^aR
zAj4g-5KM!#1?+C(6Ff)Eh$gK?D%}@s!~vutcbS~i?oWRwVTMhef=9>}#Z lJ-3tDH6Q2JBKJ#mtVZ9#z
z*C7l1CCwt%oBx~b{hyK}yn#gyXUzXgsPxY*r?Qz~DZAED2SDQJWlY+;)RlEqrkCig
z&J&UXG17zPWZy($C0PD|G_iPIW;4Blo3vCt*;lNqU2ZA22#XTY{a$8g!pzqgV8XZg
z2FV=$4n26Y-rV _xoek&nEg84}$CjJJ-Qe
zvBZ(LkMGT~dx8hEO^HMw^N`s7r(Gl>|G%WrQv?-QZ-b^~X&z~1Egk6d57Q2ePJ?c6RHm_PsS1RT`L~>H+POv
zqzNc0S4ouEto(6oA%lvg~N};i;~3R6F-?f
z=D3!PKx
=OW%D~qPH
zhBVCw3*;*2m0~_7qmhCuau0^bbLBT_WY2?DO@*PV)Arqv=Lb-leX2SN3GSaF!Q|{Y
z8rr6vif4en
56mO0#xcZSDu%W~^R#1{Ab$W*^9hrlBS=lSe-^8RPQ-Ot2Sjp~JB(i+RArN596;y%wdcl7E+&H&)gP!taoc+>B#n
z!--R8$9{;hm+`sm&rfGE>&SEDlc+rSaaH2gZ}os*GxYKfLdMwi1mZ
Ung$ZLG^ug|rXI0^J^eWaZXd*{CH9?F}Df