Description

On iOS devices (iPhone), font-based icons (FontIcon / Font Awesome) overflow their container when used directly in components like Button or added directly to layouts (e.g., HorizontalLayout). The icon expands to fill the entire screen or a large portion of it.

Desktop:

Iphone:

Expected outcome

The icon must respect its container in the same way as on desktop and Android

Minimal reproducible example

https://github.com/JefersonSantos06/vaadin-font-icon-error

public class View extends HorizontalLayout {
    public View() {
        this.add(
                new FontIcon("fa-solid", "fa-house")
        );
    }
}

Steps to reproduce

1. Set up a webfont (e.g., Font Awesome)
2. Create a simple view with a Button and a HorizontalLayout.
   • Use a FontIcon directly as the Button icon, and add another FontIcon directly into the layout.
3. Open the app on iOS (Safari/Chrome) and navigate to the view.
4. Observe that the icon overflows its container.
5. Wrap the same icon inside a span and reload.
6. Observe that, when wrapped in span, the icon renders with correct size/position.

Environment

Vaadin version(s): 24.9.0
OS: iOS 16 / 17 (Iphone)

Browsers

Safari on iOS, Chrome