我有一个ComboBox允许选择给定的项目，以及接受选择的图标：

功能都很好。

我正在寻找将搜索图标放入组合框中的效果。像瓦丁图标 https://vaadin.com/icons:

这是怎么做到的？

I tried

comboBox.setIcon(new ThemeResource("search.png"));

它没有做任何改变。

这里是后端开发人员 - 不擅长前端工具。

//============================================

EDIT:

我能想到的一件事就是制作边界ComboBox消失（还不知道如何），并在包含图标和comboBox。 还有另一种/更好的方法吗？

实际上，查看该页面的源代码，我可能是错的，但是，它似乎不是标准的 Vaadin 组合框

根据您与 @defaultlocale 的讨论，另一种解决方法可以是将按钮与组合组合在一起，如下所示

or this:

无论如何，您可以根据自己的喜好调整下面的代码，您也可以查看sources https://github.com/vaadin/valo-demo/blob/master/src/main/java/com/vaadin/tests/themes/valo/ComboBoxes.java of the sampler https://vaadin.com/valo了解更多示例。

public class ComboWithIcon extends CssLayout {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        
        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); // remove this to have a regular button
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        addComponent(comboBox);
        addComponent(searchButton);

        // set group style
        addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
    }
}

稍后编辑

根据上述内容和您以后的编辑，您还可以删除它们的边框，将它们分组到布局中，并将布局添加到面板中overall边框效果（可能有更优雅的解决方案来获取边框，但我还没有找到任何默认样式，并且我没有更多时间进行研究，因此欢迎提出建议）：

public class ComboWithIcon extends Panel {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        comboBox.addStyleName(ValoTheme.COMBOBOX_BORDERLESS);

        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
        searchButton.addStyleName("no-focus"); // remove the annoying focus effect
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        CssLayout layout = new CssLayout(searchButton, comboBox);
        // set group style
        layout.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        setContent(layout);
        setWidthUndefined(); // fit the component widths instead of expanding by default
    }
}

进行了一些小的主题调整以避免按钮上的焦点样式

.v-button-no-focus:after {
  content: none;
}

and get: