@vaadin/icon 25.0.0-alpha3 → 25.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,14 +37,14 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/component-base": "25.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha5",
+    "@vaadin/test-runner-commands": "25.0.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -50,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
 }

package/src/styles/vaadin-icon-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const iconStyles: CSSResult;

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const iconStyles = css`
+  @layer base {
+    :host {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      vertical-align: middle;
+      width: var(--vaadin-icon-size, 1lh);
+      height: var(--vaadin-icon-size, 1lh);
+      flex: none;
+      fill: var(--vaadin-icon-color, currentColor);
+      container-type: size;
+      contain: layout;
+    }
+
+    :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);
+    }
+  }
+`;

package/src/styles/vaadin-icon-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const iconStyles: CSSResult;

package/src/{vaadin-icon-styles.js → styles/vaadin-icon-core-styles.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const iconStyles = css`
   :host {

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

@@ -5,7 +5,6 @@
  */
 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<IconMixinClass> & Constructor<SlotStylesMixinClass> & T;
 
 export declare class IconMixinClass {
   /**

package/src/vaadin-icon-mixin.js

@@ -5,8 +5,7 @@
  */
 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 { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
+import { unsafeSvgLiteral } from './vaadin-icon-svg.js';
 
 const srcCache = new Map();
 
@@ -15,10 +14,9 @@ const Iconset = customElements.get('vaadin-iconset');
 /**
  * @polymerMixin
  * @mixes SlotStylesMixin
- * @mixes IconFontSizeMixin
  */
 export const IconMixin = (superClass) =>
-  class extends IconFontSizeMixin(SlotStylesMixin(superClass)) {
+  class extends SlotStylesMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -134,20 +132,11 @@ export const IconMixin = (superClass) =>
           sync: true,
         },
 
-        /** @private */
-        __defaultPAR: {
-          type: String,
-          value: 'xMidYMid meet',
-        },
-
         /** @private */
         __preserveAspectRatio: String,
 
         /** @private */
-        __useRef: Object,
-
-        /** @private */
-        __svgElement: String,
+        __useRef: String,
 
         /** @private */
         __viewBox: String,
@@ -170,11 +159,7 @@ export const IconMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '__svgChanged(svg, __svgElement)',
-        '__fontChanged(iconClass, char, ligature)',
-        '__srcChanged(src, symbol)',
-      ];
+      return ['__fontChanged(iconClass, char, ligature)', '__srcChanged(src, symbol)'];
     }
 
     static get observedAttributes() {
@@ -208,7 +193,6 @@ export const IconMixin = (superClass) =>
     /** @protected */
     ready() {
       super.ready();
-      this.__svgElement = this.shadowRoot.querySelector('#svg-group');
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
     }
@@ -245,7 +229,7 @@ export const IconMixin = (superClass) =>
       if (icon) {
         this._applyIcon();
       } else {
-        this.svg = ensureSvgLiteral(null);
+        this.svg = null;
       }
     }
 
@@ -303,29 +287,6 @@ export const IconMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __svgChanged(svg, svgElement) {
-      if (!svgElement) {
-        return;
-      }
-      renderSvg(svg, svgElement);
-    }
-
-    /** @private */
-    __computePAR(defaultPAR, preserveAspectRatio) {
-      return preserveAspectRatio || defaultPAR;
-    }
-
-    /** @private */
-    __computeVisibility(__useRef) {
-      return __useRef ? 'visible' : 'hidden';
-    }
-
-    /** @private */
-    __computeViewBox(size, viewBox) {
-      return viewBox || `0 0 ${size} ${size}`;
-    }
-
     /** @private */
     __fontChanged(iconClass, char, ligature) {
       this.classList.remove(...(this.__addedIconClasses || []));

package/src/vaadin-icon-svg.d.ts

@@ -22,11 +22,6 @@ export function isValidSvg(source: unknown): source is IconSvgLiteral;
  */
 export function ensureSvgLiteral(source: unknown): IconSvgLiteral;
 
-/**
- * Render a given SVG literal to the container.
- */
-export function renderSvg(source: unknown, container: SVGElement): void;
-
 /**
  * Create an SVG literal from source string.
  */

package/src/vaadin-icon-svg.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { nothing, render, svg } from 'lit';
+import { nothing, svg } from 'lit';
 import { isTemplateResult, TemplateResultType } from 'lit/directive-helpers.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
@@ -48,17 +48,6 @@ export function ensureSvgLiteral(source) {
   return result;
 }
 
-/**
- * Render a given SVG literal to the container.
- *
- * @param {unknown} source
- * @param {SVGElement} container
- */
-export function renderSvg(source, container) {
-  const result = ensureSvgLiteral(source);
-  render(result, container);
-}
-
 /**
  * Create an SVG literal from source string.
  *

package/src/vaadin-icon.js

@@ -11,8 +11,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { iconStyles } from './styles/vaadin-icon-core-styles.js';
 import { IconMixin } from './vaadin-icon-mixin.js';
-import { iconStyles } from './vaadin-icon-styles.js';
+import { ensureSvgLiteral } from './vaadin-icon-svg.js';
 
 /**
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -75,8 +76,8 @@ class Icon extends IconMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(Polyli
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
-        viewBox="${this.__computeViewBox(this.size, this.__viewBox)}"
-        preserveAspectRatio="${this.__computePAR(this.__defaultPAR, this.__preserveAspectRatio)}"
+        viewBox="${this.__viewBox || `0 0 ${this.size} ${this.size}`}"
+        preserveAspectRatio="${this.__preserveAspectRatio || 'xMidYMid meet'}"
         fill="${ifDefined(this.__fill)}"
         stroke="${ifDefined(this.__stroke)}"
         stroke-width="${ifDefined(this.__strokeWidth)}"
@@ -84,9 +85,9 @@ class Icon extends IconMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(Polyli
         stroke-linejoin="${ifDefined(this.__strokeLinejoin)}"
         aria-hidden="true"
       >
-        <g id="svg-group"></g>
-        <g id="use-group" visibility="${this.__computeVisibility(this.__useRef, this.svg)}">
-          <use href="${this.__useRef}" />
+        <g id="svg-group">${ensureSvgLiteral(this.svg)}</g>
+        <g id="use-group" visibility="${this.__useRef ? 'visible' : 'hidden'}">
+          <use href="${ifDefined(this.__useRef)}" />
         </g>
       </svg>
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -26,7 +26,7 @@
             "properties": [
               {
                 "name": "name",
-                "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+                "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
                 "value": {
                   "type": [
                     "string"
@@ -48,11 +48,11 @@
         },
         {
           "name": "vaadin-icon",
-          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
           "attributes": [
             {
               "name": "icon",
-              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "type": [
                   "string"
@@ -140,7 +140,7 @@
             "properties": [
               {
                 "name": "icon",
-                "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+                "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
                 "value": {
                   "type": [
                     "string"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -21,7 +21,7 @@
           "attributes": [
             {
               "name": ".name",
-              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
+              "description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
               "value": {
                 "kind": "expression"
               }
@@ -37,12 +37,12 @@
         },
         {
           "name": "vaadin-icon",
-          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
+          "description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n  const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n  return html`\n    <vaadin-icon\n      .svg=\"${svgIcon}\"\n      size=\"16\"\n    ></vaadin-icon>\n  `;\n}\n```",
           "extension": true,
           "attributes": [
             {
               "name": ".icon",
-              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
+              "description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "kind": "expression"
               }

package/src/vaadin-icon-font-size-mixin.d.ts

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.
- * The mixin does nothing if the browser supports CSS Container Query units for pseudo elements.
- */
-export declare function IconFontSizeMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<IconFontSizeMixinClass> & T;
-
-export declare class IconFontSizeMixinClass {}

package/src/vaadin-icon-font-size-mixin.js

@@ -1,74 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { needsFontIconSizingFallback } from './vaadin-icon-helpers.js';
-
-const usesFontIconSizingFallback = needsFontIconSizingFallback();
-
-if (usesFontIconSizingFallback) {
-  registerStyles(
-    'vaadin-icon',
-    css`
-      :host::after,
-      :host::before {
-        font-size: var(--_vaadin-font-icon-size);
-      }
-    `,
-    'vaadin-icon-font-size-mixin-styles',
-  );
-}
-
-/**
- * Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.
- * The mixin does nothing if the browser supports CSS Container Query units for pseudo elements.
- *
- * @polymerMixin
- */
-export const IconFontSizeMixin = (superclass) =>
-  !usesFontIconSizingFallback
-    ? superclass
-    : class extends ResizeMixin(superclass) {
-        static get observers() {
-          return ['__iconFontSizeMixinfontChanged(iconClass, char, ligature)'];
-        }
-
-        /** @protected */
-        ready() {
-          super.ready();
-
-          // Update once initially to avoid a fouc
-          this.__updateFontIconSize();
-        }
-
-        /** @private */
-        __iconFontSizeMixinfontChanged(_iconClass, _char, _ligature) {
-          // Update when iconClass, char or ligature changes
-          this.__updateFontIconSize();
-        }
-
-        /**
-         * @protected
-         * @override
-         */
-        _onResize() {
-          // Update when the element is resized
-          this.__updateFontIconSize();
-        }
-
-        /**
-         * Updates the --_vaadin-font-icon-size CSS variable value if font icons are used.
-         *
-         * @private
-         */
-        __updateFontIconSize() {
-          if (this.char || this.iconClass || this.ligature) {
-            const { paddingTop, paddingBottom, height } = getComputedStyle(this);
-            const fontIconSize = parseFloat(height) - parseFloat(paddingTop) - parseFloat(paddingBottom);
-            this.style.setProperty('--_vaadin-font-icon-size', `${fontIconSize}px`);
-          }
-        }
-      };

package/src/vaadin-icon-helpers.js

@@ -1,52 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-import { isSafari } from '@vaadin/component-base/src/browser-utils.js';
-
-/**
- * Checks if the current browser supports CSS Container Query units for pseudo elements.
- * i.e. if the fix for https://bugs.webkit.org/show_bug.cgi?id=253939 is available.
- */
-export function supportsCQUnitsForPseudoElements() {
-  const testStyle = document.createElement('style');
-  testStyle.textContent = `
-    .vaadin-icon-test-element {
-      container-type: size;
-      height: 2px;
-      visibility: hidden;
-      position: fixed;
-    }
-
-    .vaadin-icon-test-element::before {
-      content: '';
-      display: block;
-      height: 100cqh;
-    `;
-  const testElement = document.createElement('div');
-  testElement.classList.add('vaadin-icon-test-element');
-
-  document.body.append(testStyle, testElement);
-  const { height } = getComputedStyle(testElement, '::before');
-  testStyle.remove();
-  testElement.remove();
-  return height === '2px';
-}
-
-/**
- * Checks if the current browser needs a fallback for sizing font icons instead of relying on CSS Container Queries.
- */
-export function needsFontIconSizingFallback() {
-  if (!CSS.supports('container-type: inline-size')) {
-    // The browser does not support CSS Container Queries at all.
-    return true;
-  }
-  if (!isSafari) {
-    // Browsers other than Safari support CSS Container Queries as expected.
-    return false;
-  }
-  // Check if the browser does not support CSS Container Query units for pseudo elements.
-  return !supportsCQUnitsForPseudoElements();
-}