fix: icon inline size

[nmerget]

Proposed changes

If an icon-font is not loading, the icon name will destroy a layout causing layout-shifts

Checklist

Code Quality

• I have reviewed my own code (self-review), including the screen- and snapshots
• I have reviewed my changes locally with an AI assistant (e.g. GitHub Copilot, Kiro, etc.)
• No hardcoded values, magic numbers, or debug code left in

Validation

• I have added/updated tests that cover my changes
• I have tested across all relevant frameworks (React, Angular, Vue) if applicable

General

• The PR title follows the conventional commits format (e.g. feat:, fix:, chore:), as in Git Commit Conventions
• If architecture, structure, or conventions changed inside a packages/* folder, the corresponding AGENTS.md has been updated

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-icon-inline-size

[changeset-bot]

🦋 Changeset detected

Latest commit: 73054f7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@db-ux/core-foundations	Patch
@db-ux/core-components	Patch
@db-ux/ngx-core-components	Patch
@db-ux/react-core-components	Patch
@db-ux/wc-core-components	Patch
@db-ux/v-core-components	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	Patch
@db-ux/core-eslint-plugin	Patch
@db-ux/core-vite-plugin	Patch
@db-ux/core-postcss-plugin	Patch
@db-ux/mcp-server	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mfranzke]

Suggested change

block-size: $default-icon-font-size;

@nmerget as I don't know how to reproduce those "all cases", could we get rid of (or in other words, replace inline-size by) block-size, as we still have aspect-ratio, so does that aspect-ratio work in that direction ? to me it looks like that we could get rid of block-size than.

[nmerget]

The icon has to be square. Which is the normal case, but when the font is not loaded the :before just shows the content which is a text. For the text aspect-ratio is not applied correctly, inline-size does.

There is only one line extra but it makes sure that the layout won't break

[mfranzke]

but than we could remove aspect-ratio.

[mfranzke]

Suggested change

	fix: Re-add `inline-size` to icon styles because `aspect-ratio: 1` alone does not work reliably in all cases.
	fix: ensure that the icon fallback is displayed as a rectangle

that was what this PR does "internally", but we should tell our users why we do it or in other words what it does fix for them.

[nmerget]

I didn't replace it. I add inline-size to have both

[mfranzke]

that's fine, but still the message needs to tell the users what is changing to them, not to us or our code.

[Copilot]

Pull request overview

This PR addresses layout shifts that occur when an icon font fails to load by explicitly constraining the icon placeholder’s inline dimension, ensuring the icon name fallback cannot expand the layout unexpectedly.

Changes:

• Add inline-size to the shared %icon styles (alongside existing block-size) to enforce consistent icon dimensions.
• Add a Changeset to publish the fix as a patch for @db-ux/core-foundations.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/foundations/scss/icons/_icon-helpers.scss	Adds inline-size to the %icon placeholder to prevent layout shifts when icon-font fallback text appears.
.changeset/fix-icon-inline-size.md	Declares a patch release for @db-ux/core-foundations describing the sizing fix.