Icon-only Button, ToggleButton and MenuButton have different sizes?

[sillydan1]

I am trying to have a toolbar with a mix of togglebuttons, menubuttons and regular buttons, but they all have slightly different sizes. Is this a bug, or am I doing something wrong?

Screenshots:

Example code:

var showHiddenFilesButton = new ToggleButton(null, new FontIcon(BootstrapIcons.EYE));
showHiddenFilesButton.getStyleClass().addAll(Styles.BUTTON_ICON);
showHiddenFilesButton.selectedProperty().set(showHiddenFiles.get());
showHiddenFiles.bind(showHiddenFilesButton.selectedProperty());
var showHiddenFilesTip = new Tooltip("This is a ToggleButton with styleClass().addAll(Styles.BUTTON_ICON)");
showHiddenFilesTip.setAnchorLocation(AnchorLocation.WINDOW_TOP_LEFT);
showHiddenFilesButton.setTooltip(showHiddenFilesTip);

var manualRefreshButton = new Button(null, new FontIcon(BootstrapIcons.ARROW_CLOCKWISE));
manualRefreshButton.getStyleClass().addAll(Styles.BUTTON_ICON);
var refreshTip = new Tooltip("This is a Button with styleClass().addAll(Styles.BUTTON_ICON)");
refreshTip.setAnchorLocation(AnchorLocation.WINDOW_TOP_LEFT)
manualRefreshButton.setTooltip(refreshTip);

var exportButton = new MenuButton(null, new FontIcon(BootstrapIcons.BOX_ARROW_UP));
exportButton.getStyleClass().addAll(Styles.BUTTON_ICON, Tweaks.NO_ARROW);
var exportTip = new Tooltip("This is a MenuButton with styleClass().addAll(Styles.BUTTON_ICON, Tweaks.NO_ARROW)");
exportTip.setAnchorLocation(AnchorLocation.WINDOW_TOP_LEFT);
exportButton.setTooltip(exportTip);

var toolbar = new ToolBar(showHiddenFilesButton, manualRefreshButton, exportButton);

[xiongchun]

this is my style. settingsMenuBtn.getStyleClass().addAll(Tweaks.NO_ARROW);

[sillydan1]

Interesting :thinking: it seems that Styles.BUTTON_ICON is to blame here. If I remove that, it seems to work perfectly! Thanks for the hint @xiongchun !