Vaadin upload button with icon

Vaadin 6 / 7 / 8 Framework UI
1

Welcome,
I need to add icon to my upload button in Vaadin Upload component. I was trying to modify css but with
no result. Is there any trick to achieve this??
Thank’s in advance for help.

2

Hello Pawel,

Try to do something like this:

upload.setStyleName(“upload-icon”);

And customize button with CSS:

form.upload-icon .v-button,
form.upload-icon .v-button .v-button-wrap {
position:relative;
background-image:none;
background-repeat: no-repeat !important;
width:30px;
height:30px;
margin:0 !important;
padding:0 !important;
cursor:pointer;
opacity:1 !important;
border:#ccc 1px dotted;
}
form.upload-icon .v-button .v-button-wrap{
background: url(“your_icon.png”) 0px 2px no-repeat !important;
}

Of course size, cursor, image position and so on depends on your particular case.

Hope it’ll help you.

Alex.