Button styling for icon-align-top

Hi,
I want to use buttons with the above mentioned style. As icons I use icons from the VaadinIcon font.
There are 2 things I try to solve:

1. Adjusting the size of the button over style (e.g. huge) gives me both big icon and(!) caption. What I want is to paint the icon bigger, but keep the caption small. As I see the attached style goes to the div of the button v-button-icon-align-top, where the icon and the caption are located in inner spans with different styles: v-icon and v-button-caption. How can i adjust both sizes (icon and caption) separately here?

2. As an addition it would be great to realize a mouse-over effect with different caption color. Is there a way as well?

Kind regards,
Michael

There is a number of ways you can go about it.

If you KNOW for certain that the combination of BUTTON_ICON_ALIGN_TOP and BUTTON_HUGE should always look a certain way then you could do:

btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + ValoTheme.BUTTON_HUGE);

.icon-align-top.huge .v-button-caption {
  font-size: $v-font-size;
}

This might look a bit weird since the font-size is defined in v-button. Another alternative is to create your own style. E.g. "huge-icon".

btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + "huge-icon");

.icon-align-top.huge-icon .v-icon {
  font-size: $v-font-size--huge;
}

And lastly, for the 2nd question:

.v-button:hover {
  color: green;
}