Button Renderer icon and style

Hi

I’m looking for a way to design a bit the button I’ll have in my grid, it’s like in this example :
https://vaadin.com/docs/-/part/framework/components/components-grid.html#components.grid.renderer
it’s for deleting elements, so I just want to add
https://vaadin.com/icons#close-circle-o
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>() {
      @Override
      public void click(ClickableRenderer.RendererClickEvent<T> event) {
          //---
      }

});

btnRenderer.setHtmlContentAllowed(true);

tableau.addColumn(new ValueProvider() {
    @Override
    public String apply(Object source) {
        return VaadinIcons.CLOSE_CIRCLE_O.getHtml();
    }
 }, btnRenderer
).setId("delete").setCaption("delete");