How to align icon and text inside the big button?

Question

I have quite a big button (minWidth and minHeight were explicitly set to big numbers), and inside that big button there is relatively small icon and some text. Icon and text do not consume all available space, and end up being placed in the center of the button.

I want to put icon and text to the left side of the button. But it seems that I do not understand what all those alignments mean, since setting alignment to BASELINE_LEFT or setting textAlignment to LEFT didn't change anything.

How can I fix it?

Answer 1

Property textAlignment controls alignment for multiline text so it wouldn't help you.

But both

 btn.setStyle("-fx-alignment: LEFT;");

or

 btn.setAlignment(Pos.BASELINE_LEFT);

should work for you. See example below.

public class ILoveBigButtonsAndICannotLie extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Button");
        btn.setGraphic(new Rectangle(10,10, Color.RED));
        btn.setMinHeight(200);
        btn.setMinWidth(250);
        //btn.setStyle("-fx-alignment: LEFT;");
        btn.setAlignment(Pos.BASELINE_LEFT);

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public static void main(String[] args) { launch(); }
}