[KIcon]: Fix icon alignment in KLabeledIcon and KButton with icons

[AlexVelezLl]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Product

Kolibri

Expected behavior

• Icons in KLabeledIcon and KButton should be vertically aligned to the center.
• Once we solve this, we will need to audit how these changes impact Kolibri, ensuring that no regressions are being introduced. See how to preview updates in Kolibri in case you are not familiar with it yet.

Actual behavior

Icons in KLabeledIcon and KButton are not centered vertically:

Steps to reproduce the issue

You can copy this into your playground:

    <KButton
      text="settings"
      appearance="flat-button"
    >
      <template #icon>
        <KIcon
          icon="settings"
          style="font-size: 20px"
        />
      </template>
    </KButton>
    <KLabeledIcon
      label="settings"
    >
      <template #icon>
        <KIcon
          icon="settings"
          style="font-size: 20px"
        />
      </template>
    </KLabeledIcon>

[shruti862]

Hey @AlexVelezLl ,I wanted to contribute to this issue, please assign me.

[karankoder]

Hey @AlexVelezLl, I want to work on this issue.

[lokesh-sagi125]

hey @AlexVelezLl can i work on this?

[AlexVelezLl]

Hey @karankoder, @lokesh-sagi125! Thanks for your interest in picking this issue up, but @shruti862 asked for it first, so will proced to assign it to @shruti862. Please let us know if you have any quesetion :).

[shruti862]

Hey @AlexVelezLl,
I wanted to check whether the icon alignment issue should be addressed by modifying the CSS styling of KIcon, or if the fix should be applied to KButton and KLabeledIcon instead.

[AlexVelezLl]

Hey @shruti862! It should probably be fixed in the KButton and KLabeledIcon components :)