@vaadin/icon 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,20 +34,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

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/{vaadin-icon-styles.js → styles/vaadin-icon-base-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 {
@@ -12,16 +12,17 @@ export const iconStyles = css`
     align-items: center;
     box-sizing: border-box;
     vertical-align: middle;
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    flex: none;
+    fill: var(--vaadin-icon-color, currentColor);
     container-type: size;
   }
 
   :host::after,
   :host::before {
     line-height: 1;
-    font-size: 100cqh;
+    font-size: var(--vaadin-icon-visual-size, 100cqh);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
@@ -33,10 +34,14 @@ export const iconStyles = css`
 
   svg {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: var(--vaadin-icon-visual-size, 100%);
+    height: var(--vaadin-icon-visual-size, 100%);
     /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
     overflow: visible;
+
+    @container style(--vaadin-icon-stroke-width) {
+      stroke-width: var(--vaadin-icon-stroke-width);
+    }
   }
 
   :host(:is([icon-class], [font-icon-content])) svg {
@@ -46,4 +51,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;
+  }
 `;

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 {
   /**
@@ -38,9 +37,9 @@ export declare class IconMixinClass {
   /**
    * The SVG source to be loaded as the icon. It can be:
    * - an URL to a file containing the icon
-   * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
+   * - an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained
    *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
-   * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
+   * - a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
    *   function for the SVG content passed
    */
   src: string | null;

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 {
         /**
@@ -52,9 +50,9 @@ export const IconMixin = (superClass) =>
         /**
          * The SVG source to be loaded as the icon. It can be:
          * - an URL to a file containing the icon
-         * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
+         * - an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained
          *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
-         * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
+         * - a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
          *   function for the SVG content passed
          *
          * @type {string}
@@ -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';
 
@@ -35,7 +35,7 @@ export function isValidSvg(source) {
 /**
  * Create a valid SVG literal based on the argument.
  *
- * @param {unknown} svg
+ * @param {unknown} source
  */
 export function ensureSvgLiteral(source) {
   let result = source == null || source === '' ? nothing : source;
@@ -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.d.ts

@@ -45,6 +45,24 @@ import { IconMixin } from './vaadin-icon-mixin.js';
  *   `;
  * }
  * ```
+ *
+ * ### Styling
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property          | Description
+ * -----------------------------|-------------
+ * `--vaadin-icon-size`         | Size (width and height) of the icon
+ * `--vaadin-icon-stroke-width` | Stroke width of the SVG icon
+ * `--vaadin-icon-visual-size`  | Visual size of the icon
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-tooltip`  | Set when the icon has a slotted tooltip
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class Icon extends ThemableMixin(ElementMixin(IconMixin(HTMLElement))) {}
 

package/src/vaadin-icon.js

@@ -9,10 +9,11 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { iconStyles } from './styles/vaadin-icon-base-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.
@@ -53,13 +54,31 @@ import { iconStyles } from './vaadin-icon-styles.js';
  * }
  * ```
  *
+ * ### Styling
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property          | Description
+ * -----------------------------|-------------
+ * `--vaadin-icon-size`         | Size (width and height) of the icon
+ * `--vaadin-icon-stroke-width` | Stroke width of the SVG icon
+ * `--vaadin-icon-visual-size`  | Visual size of the icon
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-tooltip`  | Set when the icon has a slotted tooltip
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes IconMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Icon extends IconMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-icon';
   }
@@ -68,15 +87,22 @@ class Icon extends IconMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(Polyli
     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"
         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 +110,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/vaadin-icon.js

@@ -1,4 +1,4 @@
-import './theme/lumo/vaadin-icon.js';
+import './src/vaadin-icon.js';
 
 export * from './src/vaadin-icon-svg.js';
 export * from './src/vaadin-icon.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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-alpha2/#/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-alpha21/#/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-alpha2/#/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-alpha2/#/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-alpha21/#/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-alpha21/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property          | Description\n-----------------------------|-------------\n`--vaadin-icon-size`         | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size`  | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`has-tooltip`  | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "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-alpha2/#/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-alpha21/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "type": [
                   "string"
@@ -61,7 +61,7 @@
             },
             {
               "name": "src",
-              "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format \"/path/to/file.svg#objectID\", where the \"objectID\" refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format \"data:image/svg+xml,<svg>...</svg>\". You may need to use the \"encodeURIComponent\"\n  function for the SVG content passed",
+              "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`\n  function for the SVG content passed",
               "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-alpha2/#/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-alpha21/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
                 "value": {
                   "type": [
                     "string"
@@ -160,7 +160,7 @@
               },
               {
                 "name": "src",
-                "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format \"/path/to/file.svg#objectID\", where the \"objectID\" refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format \"data:image/svg+xml,<svg>...</svg>\". You may need to use the \"encodeURIComponent\"\n  function for the SVG content passed",
+                "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`\n  function for the SVG content passed",
                 "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-alpha2",
+  "version": "25.0.0-alpha21",
   "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-alpha2/#/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-alpha21/#/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-alpha2/#/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-alpha2/#/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-alpha21/#/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-alpha21/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property          | Description\n-----------------------------|-------------\n`--vaadin-icon-size`         | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size`  | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`has-tooltip`  | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "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-alpha2/#/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-alpha21/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
               "value": {
                 "kind": "expression"
               }
@@ -56,7 +56,7 @@
             },
             {
               "name": ".src",
-              "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format \"/path/to/file.svg#objectID\", where the \"objectID\" refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format \"data:image/svg+xml,<svg>...</svg>\". You may need to use the \"encodeURIComponent\"\n  function for the SVG content passed",
+              "description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained\n  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`\n  function for the SVG content passed",
               "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();
-}

package/theme/lumo/vaadin-icon-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/sizing.js';

package/theme/lumo/vaadin-icon-styles.js

@@ -1,13 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-icon',
-  css`
-    :host {
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
-  `,
-  { moduleId: 'lumo-icon' },
-);

package/theme/lumo/vaadin-icon.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-icon-styles.js';
-import '../../src/vaadin-icon.js';

package/theme/lumo/vaadin-icon.js

@@ -1,2 +0,0 @@
-import './vaadin-icon-styles.js';
-import '../../src/vaadin-icon.js';