Remove align-self: center from .icon atom

[thomaspietschmann]

Problem

The .icon atom sets align-self: center globally:

.icon {
  display: inline-flex;
  align-self: center;
  // ...
}

This assumes the parent is always a flex-row where vertical centering next to text is desired. It breaks in column-flex layouts, where align-self: center causes horizontal centering instead.

Example: In list-teaser-freetext, the arrow icon appears horizontally centered instead of left-aligned, requiring a per-component override:

.list-teaser-freetext {
  > .icon {
    align-self: flex-start; // forced override
  }
}

Root Cause

An atom should not make assumptions about its parent's layout context. align-self is context-dependent and does not belong on an atom.

Proposed Fix

Replace align-self: center with vertical-align: middle in _icon.scss:

.icon {
  display: inline-flex;
  vertical-align: middle; // works in inline contexts without assuming flex context
  // remove: align-self: center
}

vertical-align: middle handles the common inline use case (icon next to text) without side effects in flex-column layouts.

Impact

• Audit all existing components that rely on align-self: center being set on .icon — they may need align-items: center or align-self: center added to their own container.
• list-teaser-freetext and any future column-flex components can remove their override once this is fixed.