Search code examples
cssvaadinvaadin8

Vaadin8: How to display Vaadin icon inside TextField?

Using Vaadin 8 I want to display the Vaadin search icon inside the TextField on the left side.

    TextField search = new TextField("");
    search.setPlaceholder("Search target");
    search.setIcon(VaadinIcons.SEARCH);
    search.addStyleName("search");

With this code the icon is displayed above the TextField. I think I need to add some CSS code in the mytheme.scss file such as

    .v-icon-search {
       display: inline;
}

But this did not do anything.

Solution

  • There is a predefined styles in ValoTheme for this purpose:

    search.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);