Vaadin - Align icon on button - button

Question

I'm working on a simple back/forward-navigation with Vaadin existing of two buttons, each with a label and an icon (arrows left and right).
navigator = getUI().getNavigator();
if (!StringUtils.isEmpty(backViewID)) {
backButton = new Button(backButtonI18n, IconCache.FAST_REWIND_BUTTON.getIconResource());
backButton.addClickListener(getBackButtonListener());
}
if (!StringUtils.isEmpty(nextViewID)) {
nextButton = new Button(nextButtonI18n, IconCache.FAST_FORWARD_BUTTON.getIconResource());
nextButton.addClickListener(getNextButtonListener());
}
How can I align the icons on each button? Currently it looks like
"<< Back" ">> Next", because icons are aligned on the left and text is aligned on the right side. I now want to align the icon for the next-button on the right side and the text on the left, to make it look like "<< Back" "Next >>".
I hope someone can help me with that.
Cheers, Hendrik

Answer 1

If you're using Valo, this is relatively easy. You just need to add a style name which is already shipped with the theme forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT):
public class ButtonsComponent extends HorizontalLayout {
public ButtonsComponent() {
Button backButton = new Button("Back", FontAwesome.ARROW_LEFT);
Button forwardButton = new Button("Forward", FontAwesome.ARROW_RIGHT);
forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
addComponent(backButton);
addComponent(forwardButton);
}
}
Alternatively you can just copy the same exact CSS from the valo-button-icon-align-right-style into your theme, and add that particular style to your button: forwardButton.addStyleName("my-custom-button-with-right-alligned-icon");
.my-custom-button-with-right-alligned-icon {
[class*="wrap"] {
display: inline-block;
}
.v-icon {
float: right;
$padding-width: ceil($v-unit-size/2.4);
margin-left: $padding-width + ceil($padding-width/-5);
+ span:not(:empty) {
margin-left: 0;
}
}
}
Either way, you should end up with something similar to: