fix: add explicit element to enforce icon baseline alignment (#9661)

Author: jouni

packages/icon/src/styles/vaadin-icon-base-styles.js

@@ -17,7 +17,6 @@ export const iconStyles = css`
     flex: none;
     fill: var(--vaadin-icon-color, currentColor);
     container-type: size;
-    contain: layout;
   }
 
   :host::after,
@@ -48,4 +47,14 @@ export const iconStyles = css`
   :host([font-icon-content])::before {
     content: attr(font-icon-content);
   }
+
+  .baseline {
+    order: -1;
+  }
+
+  .baseline::before {
+    content: '\\2003' / '';
+    display: inline-block;
+    width: 0;
+  }
 `;

packages/icon/src/vaadin-icon.js

@@ -69,9 +69,16 @@ class Icon extends IconMixin(ElementMixin(LumoInjectionMixin(ThemableMixin(Polyl
     return iconStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`
+      <span class="baseline"></span>
       <svg
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"

packages/vaadin-lumo-styles/src/components/button.css

@@ -266,7 +266,6 @@ Note, to make it work, the form fields should have the same "::before" pseudo-el
   /* Icons */
 
   [part] ::slotted(vaadin-icon) {
-    display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }

packages/vaadin-lumo-styles/src/components/icon.css

@@ -5,43 +5,7 @@
  */
 @media lumo_components_icon {
   :host {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    vertical-align: middle;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
-    fill: currentColor;
-    container-type: size;
-  }
-
-  :host::after,
-  :host::before {
-    line-height: 1;
-    font-size: 100cqh;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
-    overflow: visible;
-  }
-
-  :host(:is([icon-class], [font-icon-content])) svg {
-    display: none;
-  }
-
-  :host([font-icon-content])::before {
-    content: attr(font-icon-content);
   }
 }

packages/vaadin-lumo-styles/src/components/menu-bar-item.css

@@ -12,7 +12,6 @@
   }
 
   [part='content'] ::slotted(vaadin-icon) {
-    display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }