Displaying Additional Icons Inside the AutoComplete Input Area

Updated on Nov 20, 2025

Environment

Version	Product	Author
11.1.0	Telerik UI for .NET MAUI AutoComplete	Dobrinka Yordanova

Description

I want to display an additional icon inside the input area of the UI for .NET MAUI AutoComplete control.

This knowledge base article also answers the following questions:

• How to use the ControlTemplate to customize Telerik UI for .NET MAUI 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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:telerikMaui="clr-namespace:Telerik.Maui;assembly=Telerik.Maui.Core"
             xmlns:telerikMauiControls="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
             x:Class="MauiApp11.MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="RadAutoComplete_ControlTemplate">
                <telerikMauiControls:RadWrapLayout x:Name="PART_WrapLayout"
                                                   BackgroundColor="Transparent"
                                                   StretchLastChild="True"
                                                   AutomationId="RadAutoCompleteViewWrapLayout">
                    <!-- Add the additional icon here -->
                    <Image WidthRequest="20" HeightRequest="20" BackgroundColor="LightBlue" />
                    <telerikMauiControls:RadDockLayout x:Name="PART_DockLayout">
                        <telerikMauiControls:RadTemplatedButton x:Name="PART_ClearButton"
                                                                 IsEnabled="{TemplateBinding IsEnabled}"
                                                                 Command="{TemplateBinding ClearTextCommand}"
                                                                 Style="{TemplateBinding ActualClearButtonStyle}"
                                                                 telerikMauiControls:RadDockLayout.Dock="Right"
                                                                 AutomationId="RadAutoCompleteClearButton" />
                        <telerikMauiControls:RadTextInput x:Name="PART_Input"
                                                           Style="{TemplateBinding ActualTextInputStyle}"
                                                           IsEnabled="{TemplateBinding IsEnabled}"
                                                           FontFamily="{TemplateBinding FontFamily}"
                                                           FontSize="{TemplateBinding FontSize}"
                                                           FontAttributes="{TemplateBinding FontAttributes}"
                                                           Text="{TemplateBinding Text, Mode=TwoWay}"
                                                           TextColor="{TemplateBinding TextColor}"
                                                           PlaceholderColor="{TemplateBinding PlaceholderColor}"
                                                           Keyboard="{TemplateBinding Keyboard}"
                                                           AutomationId="RadAutoCompleteTextInput" />
                    </telerikMauiControls:RadDockLayout>
                </telerikMauiControls:RadWrapLayout>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <telerik:RadAutoComplete x:Name="autoComplete" 
                                 ControlTemplate="{StaticResource RadAutoComplete_ControlTemplate}"
                                 Placeholder="Search here..." />
    </VerticalStackLayout>

</ContentPage>

See Also

• Styling and Themes Overview
• UI for .NET MAUI AutoComplete Documentation