DateTimePicker + FA6 is broken

[rluisr]

Overview of the problem

Buefy version: 0.9.16
Vuejs version: 2.6.14
OS/Browser: 98.0.4758.102

Description

An icon sticks out from input after upgrade font awesome 6 and buefy v0.9.16.
Before the upgrade, no issue was found.

Steps to reproduce

<b-field>
  <b-datetimepicker
    icon="calendar-plus"
    icon-pack="fas"
  />
</b-field>

Expected behavior

Fit with input like this.

Actual behavior

I tried to implement it on CodePen to make things easier for you, but I couldn't find a CDN for fontawesome-svg-core.

[jtommy]

I added only the new icon packs but maybe I understand the problem..

[sgarner]

The sizing of icons is affected in many places with FA6 + Buefy, and not specific to DateTimePicker.

See also #3668 (comment)

[erenbertr]

For now I "solved" this issue with:

.icon svg { width: 1em; height: 1em; max-width: 80%; max-height: 80%; }

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.