Touchkit Can't change size of icon

I increase the size of the navigation button to a height of 75px (or percentage)
I can’t get the navigation button icon to make a similar stretch!!!
How do I control the percentage between iMage and text?
How do I get the text to wrap?

If I try to put an Image and navigation button on the same row in a horizontal button group they don’t fallout on the same line!! (even if navigationbutton is 50% and Image is 30% width

Any responses, it is getting to be a crtical issue, for my student project

Hi Alan,

one possible way to do this is using an image as your icon.

This way you can change the size of the image (using your favoured image manipulation program) and have the size of the icon change accordingly. As an example: I created an image ‘deer.png’ with height and width set to 75px. In my project called ‘myproject’ I store the image in the folder ‘/WebContent/VAADIN/themes/myproject/images’. Now I can use the image as an icon for my button ‘button’ using the code

button.setIcon(new ThemeResource("images/deer.png"));

Best regards,


Doesn’t seem to work with touchkit navifation button.
Does work with regular button


I tried the following method on a NavigationButton and it worked for me. I use css styling and an icon from the FontAwesome collection (in this case HOSPITAL_O).

In the code I have the following code snippet:

NavigationButton navigationButton = new NavigationButton();

In my style file (myproject.scss) I add the following code:

.myStyle {
.v-icon.FontAwesome {
font-size: 60px;

You will probably have to do some tweaking to get the text alligned correctly alongside your icon but hopefully this will work for you as well.