diff --git a/blazor/textbox/getting-started-webapp.md b/blazor/textbox/getting-started-webapp.md index 183daebc5b..eee72a0cbd 100644 --- a/blazor/textbox/getting-started-webapp.md +++ b/blazor/textbox/getting-started-webapp.md @@ -112,32 +112,33 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding icons to the Blazor TextBox -A TextBox can be created with icon as a group by creating the parent `div` element with the class `e-input-group` and add the icon element as span with the class `e-input-group-icon`. +You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application: -{% tabs %} -{% highlight razor %} +```cshtml +@using Syncfusion.Blazor.Inputs -
- - +
+ +
- - -{% endhighlight %} -{% endtabs %} + } +} +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzZCKNfeoflPrc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %} diff --git a/blazor/textbox/getting-started.md b/blazor/textbox/getting-started.md index 0a7c9e4a51..97b20fc332 100644 --- a/blazor/textbox/getting-started.md +++ b/blazor/textbox/getting-started.md @@ -128,32 +128,33 @@ Add the Syncfusion Blazor TextBox component in the **~/Pages/Index.razor** file. ## Adding icons to the Blazor TextBox -A TextBox can be created with icon as a group by creating the parent `div` element with the class `e-input-group` and add the icon element as span with the class `e-input-group-icon`. +You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application: -{% tabs %} -{% highlight razor %} +```cshtml +@using Syncfusion.Blazor.Inputs -
- - +
+ +
- - -{% endhighlight %} -{% endtabs %} + } +} +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzZCKNfeoflPrc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %}