Button Renderer icon and style


I’m looking for a way to design a bit the button I’ll have in my grid, it’s like in this example :
it’s for deleting elements, so I just want to add
to the button, because without it’s not very beautiful ^^

I’m not very used to styling in vaadin, even after some researches, so if anyone does no something :wink:

ButtonRenderer should allow html content in button text. That means that using getHtml() method of VaadinIcons class, you will get the html presentation of that icon, e.g. CLOSE_CIRCLE_O. You need to setHtmlContentAllowed(true) in ButtonRenerer first.

If you are interested in better delete button renderer, you can find one in https://vaadin.com/directory#!addon/grid-renderers-collection-for-vaadin7 (Vaadin 7) or https://vaadin.com/directory#!addon/gridfastnavigation-add-on (Vaadin 8)

Thanks it works

I put the code for someone else if needed :

ButtonRenderer btnRenderer = new ButtonRenderer(new ClickableRenderer.RendererClickListener<T>() {
      public void click(ClickableRenderer.RendererClickEvent<T> event) {



tableau.addColumn(new ValueProvider() {
    public String apply(Object source) {
        return VaadinIcons.CLOSE_CIRCLE_O.getHtml();
 }, btnRenderer