ButtonGroup: Invalid alignement of icon and non-icon buttons

[filipbekic01]

Describe the bug

When I group button that has label only and another button that has icon only, alignement is broken. Looks like they are not horizontally aligned.

Adding display:flex on buttonGroup actually fix the problem, however I'm not sure how would you like to handle it.

Reproducer

https://stackblitz.com/edit/primevue-4-datatable-columngroup-filter-p9kgpj?file=src%2FApp.vue

PrimeVue version

4.x.x

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[CCodam]

This is also an issue without using ButtonGroup.
The issue seems to be keeping the icons and text on the same baseline. I tried using Font Awesome icons instead, but that just gave me a third alignment.

Adding a vertical-align: bottom to the Buttons fixed all three alignments it for me

<Button pt:root:style="vertical-align: bottom" icon="pi pi-check"></Button>

Consider adding it to the .p-button style block in button/style/ButtonStyle.js

Also, it looks like you're trying to make something for which there is a specific component for, you might want to try out the SplitButton
https://primevue.org/splitbutton/

[filipbekic01]

Split button works, thank you. However, I still think that icon and text should be perfectly aligned either way. Right?