refactor: align icon on the baseline, force it to be a flex container (#10619) (#10679)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: vaadin-bot

dev/icon.html

@@ -13,6 +13,7 @@
       import '@vaadin/icons/vaadin-iconset.js';
       import '@vaadin/tooltip';
       import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
+      import { iconFontCss } from '../packages/icon/test/test-icon-font.js';
 
       const template = document.createElement('template');
       template.innerHTML = `
@@ -34,11 +35,30 @@
       `;
 
       Iconset.register('my-icons-iconset', 32, template);
+
+      const fontIconStyle = document.createElement('style');
+      fontIconStyle.textContent = iconFontCss;
+      document.head.append(fontIconStyle);
     </script>
 
     <style>
       h6 {
-        margin-top: var(--lumo-space-m);
+        margin-top: var(--vaadin-gap-m);
+        margin-bottom: var(--vaadin-gap-xs);
+      }
+
+      vaadin-icon {
+        outline: 1px dotted red;
+      }
+
+      .baseline {
+        --vaadin-icon-size: 100px;
+        font-size: 100px;
+      }
+
+      .baseline .my-icon-font {
+        line-height: inherit;
+        vertical-align: baseline;
       }
     </style>
   </head>
@@ -69,6 +89,15 @@ <h6>SVG Sprite</h6>
 
     <h6>SVG Data</h6>
     <vaadin-icon id="icon-data"></vaadin-icon>
+
+    <h6>Baseline</h6>
+    <div class="baseline">
+      <vaadin-icon icon="vaadin:phone"></vaadin-icon>
+      <vaadin-icon icon="my-icons-iconset:logo"></vaadin-icon>
+      <vaadin-icon font-family="lumo-icons" char="ea0e"></vaadin-icon>
+      <vaadin-icon icon-class="my-icon-font icon-before"></vaadin-icon>
+    </div>
+
     <script>
       const iconData = document.querySelector('#icon-data');
       iconData.src = `data:image/svg+xml,${encodeURIComponent(

packages/aura/src/typography.css

@@ -6,6 +6,7 @@
   --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
 
   --aura-font-family: var(--aura-font-family-instrument-sans);
+  --vaadin-icon-baseline-font-family: var(--aura-font-family);
 
   --aura-base-font-size: 14;
   --aura-base-line-height: 1.4;

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

@@ -7,11 +7,11 @@ import { css } from 'lit';
 
 export const iconStyles = css`
   :host {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
+    display: inline-flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    font-size: inherit !important;
     box-sizing: border-box;
-    vertical-align: middle;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     flex: none;
@@ -61,4 +61,8 @@ export const iconStyles = css`
     display: inline-block;
     width: 0;
   }
+
+  :host(:is([icon-class], [font-family])) .baseline {
+    font-family: var(--vaadin-icon-baseline-font-family, inherit);
+  }
 `;

packages/icon/src/vaadin-icon-mixin.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { IconFontSizeMixinClass } from './vaadin-icon-font-size-mixin.js';
 import type { IconSvgLiteral } from './vaadin-icon-svg.js';
 
@@ -13,7 +12,7 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
  */
 export declare function IconMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<IconFontSizeMixinClass> & Constructor<IconMixinClass> & Constructor<SlotStylesMixinClass> & T;
+): Constructor<IconFontSizeMixinClass> & Constructor<IconMixinClass> & T;
 
 export declare class IconMixinClass {
   /**

packages/icon/src/vaadin-icon-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
 import { unsafeSvgLiteral } from './vaadin-icon-svg.js';
@@ -14,11 +13,10 @@ const Iconset = customElements.get('vaadin-iconset');
 
 /**
  * @polymerMixin
- * @mixes SlotStylesMixin
  * @mixes IconFontSizeMixin
  */
 export const IconMixin = (superClass) =>
-  class extends IconFontSizeMixin(SlotStylesMixin(superClass)) {
+  class extends IconFontSizeMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -173,20 +171,6 @@ export const IconMixin = (superClass) =>
       this.__fetch = fetch.bind(window);
     }
 
-    /** @protected */
-    get slotStyles() {
-      const tag = this.localName;
-      return [
-        `
-        ${tag}[icon-class] {
-          display: inline-flex;
-          vertical-align: middle;
-          font-size: inherit;
-        }
-      `,
-      ];
-    }
-
     /** @private */
     get __iconClasses() {
       return this.iconClass ? this.iconClass.split(' ') : [];

packages/icon/test/icon-font.test.js

@@ -51,9 +51,15 @@ describe('vaadin-icon - icon fonts', () => {
       // Workaround to trigger cqh recalculation in Safari and Firefox
       // https://github.com/vaadin/web-components/issues/8397
       async function iconRender(icon) {
-        icon.style.display = 'block';
+        const style = document.createElement('style');
+        style.textContent = `
+          :host {
+            display: block !important;
+          }
+        `;
+        icon.shadowRoot.appendChild(style);
         await nextResize(icon);
-        icon.style.display = '';
+        icon.shadowRoot.removeChild(style);
       }
 
       icon.style.padding = '5px';