From fc7e09952f045285a04f663bf59fa82337dc7911 Mon Sep 17 00:00:00 2001
From: Matthijs <115901851+tieskuh@users.noreply.github.com>
Date: Sun, 30 Aug 2026 21:11:10 +0200
Subject: [PATCH] fix: vertically center icons within icon buttons (#2734)

Menu icons sit visibly high inside their round buttons in the iOS
companion app, and one pixel high everywhere else. The card's icon
wrapper (`advanced-camera-card-icon`) is slotted into `ha-icon-button`,
whose label renders slotted content inside a plain `<span>`. The wrapper
is an `inline-block`, so it rides the text baseline and leaves the
font's descender space underneath it: the span grows taller than the
icon (measured: 24.5px around a 22.5px icon under Roboto), the button's
flex layout centers the *span*, and the icon lands high by half the
descent.

That descent is a property of the active font, which is why the offset
differs per platform: about 1px under Roboto, and about 2px when the
font stack resolves to a system font, as on iOS, where it is clearly
visible inside the round menu button background. Slotted Home Assistant
icons do not show this because they are laid out block-level via
`--ha-icon-display`, which the card already sets; the card's own wrapper
element reintroduces the inline-block one level up.

**Change:** lay the wrapper out block-level wherever it is slotted into
`ha-icon-button` (`button.scss`, which also covers the submenu and
next/previous controls). Block layout has no baseline, so the label span
shrinks to exactly the icon and the icon centers.

**Verification:**

- The structure (flex button, label span, slotted icon) rebuilt
standalone in Playwright Chromium and WebKit: with an inline-block icon
the offset is 1px under Roboto and 1.75 to 2px under system fonts, in
both engines; with a block icon it is 0.0px in every engine, font, and
button size tried.
- Measured on a live HA 2026.8.3 dashboard (45px menu buttons): before,
every menu icon center sat 1px above its button center; after, 0.0px for
both a standard menu button and a conditional
`advanced-camera-card-menu-icon` element.
- `yarn run test`, `yarn run test:browser` (chromium), `yarn run lint`,
`yarn run typecheck` pass.

---------

Co-authored-by: dermotduffy <dermot.duffy@gmail.com>
---
 src/scss/button.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/scss/button.scss b/src/scss/button.scss
index 229796f4..bdc7f5eb 100644
--- a/src/scss/button.scss
+++ b/src/scss/button.scss
@@ -10,3 +10,9 @@ ha-icon-button {
   /* Buttons can always be clicked */
   pointer-events: auto;
 }
+
+ha-icon-button advanced-camera-card-icon {
+  // Inline-level boxes sit on a line of text, where the button label's font
+  // reserves space below the line and pushes the icon off-center.
+  display: block;
+}