diff --git a/knowledge-base/add-icon-inside-autocomplete-input-area-dotnet-maui.md b/knowledge-base/add-icon-inside-autocomplete-input-area-dotnet-maui.md new file mode 100644 index 00000000..c20c8d35 --- /dev/null +++ b/knowledge-base/add-icon-inside-autocomplete-input-area-dotnet-maui.md @@ -0,0 +1,92 @@ +--- +title: Displaying Additional Icon Inside AutoComplete Input Area +description: Learn how to display an additional icon inside the input area of the Telerik UI for .NET MAUI AutoComplete component by customizing its ControlTemplate. +type: how-to +page_title: How to Add an Icon Inside AutoComplete Input Area in .NET MAUI +meta_title: Add Icon Inside AutoComplete Input Area in Telerik UI for .NET MAUI +slug: add-icon-inside-autocomplete-input-area-dotnet-maui +tags: autocomplete, ui for .net maui, controltemplate, icon +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI AutoComplete | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to display an additional icon inside the input area of the [UI for .NET MAUI AutoComplete](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/overview) component. + +This knowledge base article also answers the following questions: +- How to use the `ControlTemplate` to customize Telerik AutoComplete? +- How can I add custom elements inside the AutoComplete input area? +- How do I add an icon to the Telerik UI for .NET MAUI AutoComplete? + +## Solution + +To add an icon inside the input area of the AutoComplete component, modify its `ControlTemplate`. Use the pre-defined template available in the Telerik theming system and customize it as needed. + +1. Add the required namespaces to your page. + +2. Define a custom `ControlTemplate` for the AutoComplete component in the `ResourceDictionary` of your page. Include the additional icon inside the `PART_WrapLayout`. + +3. Apply the custom `ControlTemplate` to the `RadAutoComplete` component. + +Here is an example: + +```xaml + + + + + + + + + + + + + + + + + + + + + + +``` + +## See Also + +- [Styling and Themes Overview](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview) +- [UI for .NET MAUI AutoComplete Documentation](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/overview)