Alignment to left icons and text in button

I have button with icon and text. If I extend width of button then icon and text is centrally. But I would have icon and text alignment to left. Is there any way to get it?

Quite easily; you need to add the CSS ‘text-align: left;’ to the button-wrap DIV element. Of course, you need a custom theme first.

Adding this make my text left but some of the button look changes. How can I only change the text to be left
and make no other changes to my button?

.left .v-button-wrap {
text-align: left;
}

login.addStyleName(“left”);

How can I make this work?

When using Vaadin style names, you should use addStyleName instead of setStyleName. I tested that CSS in the Sampler and it seems to work; what Vaadin version are you using, and what theme are you extending?

You can easily check styles on the DOM with the Chrome or Firefox developer tools.

It did work. Thanks. Instead of doing this on every button:

login.addStyleName(“left”);

How can I make it default for all buttons?

.v-button {
text-align: left;
}

should do the trick.