New to Kendo UI for Angular? Start a free 30-day trial

Adding Suffix Adornment Icon to AutoComplete


ProductProgress® Kendo UI® for Angular AutoComplete


How can I add a suffix adornment icon to the Kendo UI for Angular AutoComplete?


Unlike the TextBox, the AutoComplete and the rest of the Kendo dropdown components do not provide a built-in adornment option. To add a suffix adornment icon:

  1. Create a custom icon outside the AutoComplete and wrap them into a single container:

    <span class="autocomplete-container">
        <kendo-autocomplete ...></kendo-autocomplete>
        <span class="toggle-icon k-icon k-i-cancel"></span>
  2. Position the created icon through custom CSS code. Note that the proposed units and values could vary depending on how and where the AutoComplete is defined.

    span {
         margin-right: 15px;
     kendo-autocomplete {
         width: 170px;
    .autocomplete-container {
      position: relative;
    .toggle-icon {
      position: absolute;
      top: 0px;
      right: -10px;
      font-size: 18px;
      color: red;
  3. Depending on the project requirements, the icon could be visible in specific cases (like when the control is invalid). Use the *ngIf structural directive to determine the visibility of the icon.

        *ngIf="myForm.controls.size.touched && myForm.controls.size.invalid"
        class="toggle-icon k-icon k-i-cancel"

The following example demonstrates how to add a suffix adornment icon when the AutoComplete control gets invalid.

View Source
Change Theme:

In this article

Not finding the help you need?