Skip to content

Conversation

@jouni
Copy link
Member

@jouni jouni commented Dec 11, 2025

Align icons on baseline instead of middle of the line-box. Remove slotted styles, always force the icon to be a flex container.

Fixes #10583 for SVG icons in all themes and for font icons in the built-in themes (Aura and Lumo).

Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests are failing as there are some hardcoded values e.g. for ::before pseudo-element height:


 ❌ vaadin-icon - icon fonts > sizing > should have the same height as the host
      AssertionError: expected 36 to be close to 24 +/- 1
        at n.<anonymous> (packages/icon/test/icon-font.test.js:26:52)

 ❌ vaadin-icon - icon fonts > sizing > should not overflow host - line height
      AssertionError: expected 36 to be close to 24 +/- 1
        at n.<anonymous> (packages/icon/test/icon-font.test.js:47:52)

 ❌ vaadin-icon - icon fonts > sizing > should subtract vertical padding from height
      AssertionError: expected 26 to be close to 14 +/- 1
        at n.<anonymous> (packages/icon/test/icon-font.test.js:62:72)

@web-padawan web-padawan changed the title fix: base icon vertical align refactor: align icon on the baseline, force it to be a flex container Dec 16, 2025
@sonarqubecloud
Copy link

@web-padawan web-padawan merged commit 0aeb0f2 into main Dec 16, 2025
9 checks passed
@web-padawan web-padawan deleted the fix/base-icon-vertical-align branch December 16, 2025 08:05
web-padawan pushed a commit that referenced this pull request Dec 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[grid] Double row borders with Aura background color

4 participants