@vaadin/icon 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

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

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

@@ -22,7 +22,7 @@ export const iconStyles = css`
   :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;
@@ -34,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 {

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

@@ -0,0 +1,19 @@
+/**
+ * @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.
+ * In older versions of Safari, it didn't support Container Queries units used in pseudo-elements. It has been fixed in
+ * recent versions, but there's an regression in Safari 26, which caused the same issue to happen when the icon is
+ * attached to an element with shadow root.
+ * 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

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { needsFontIconSizingFallback } from './vaadin-icon-helpers.js';
+
+const usesFontIconSizingFallback = needsFontIconSizingFallback();
+
+/**
+ * Mixin which enables the font icon sizing fallback for browsers that do not support CSS Container Queries.
+ * In older versions of Safari, it didn't support Container Queries units used in pseudo-elements. It has been fixed in
+ * recent versions, but there's an regression in Safari 26, which caused the same issue to happen when the icon is
+ * attached to an element with shadow root.
+ * 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 styles() {
+          return css`
+            :host::after,
+            :host::before {
+              font-size: var(--vaadin-icon-visual-size, var(--_vaadin-font-icon-size));
+            }
+          `;
+        }
+
+        /** @protected */
+        updated(props) {
+          super.updated(props);
+
+          if (props.has('char') || props.has('iconClass') || props.has('ligature')) {
+            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

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 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');
+
+  const shadowParent = document.createElement('div');
+  shadowParent.attachShadow({ mode: 'open' });
+  shadowParent.shadowRoot.innerHTML = '<slot></slot>';
+  shadowParent.append(testElement.cloneNode());
+
+  document.body.append(testStyle, testElement, shadowParent);
+
+  const needsFallback = [...document.querySelectorAll('.vaadin-icon-test-element')].find(
+    (el) => getComputedStyle(el, '::before').height !== '2px',
+  );
+
+  testStyle.remove();
+  testElement.remove();
+  shadowParent.remove();
+  return !needsFallback;
+}
+
+/**
+ * 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/src/vaadin-icon-mixin.d.ts

@@ -5,6 +5,7 @@
  */
 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';
 
 /**
@@ -12,7 +13,7 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
  */
 export declare function IconMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<IconMixinClass> & Constructor<SlotStylesMixinClass> & T;
+): Constructor<IconFontSizeMixinClass> & Constructor<IconMixinClass> & Constructor<SlotStylesMixinClass> & T;
 
 export declare class IconMixinClass {
   /**
@@ -37,9 +38,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,6 +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 { unsafeSvgLiteral } from './vaadin-icon-svg.js';
 
 const srcCache = new Map();
@@ -14,9 +15,10 @@ const Iconset = customElements.get('vaadin-iconset');
 /**
  * @polymerMixin
  * @mixes SlotStylesMixin
+ * @mixes IconFontSizeMixin
  */
 export const IconMixin = (superClass) =>
-  class extends SlotStylesMixin(superClass) {
+  class extends IconFontSizeMixin(SlotStylesMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -50,9 +52,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}

package/src/vaadin-icon-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;

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

@@ -11,7 +11,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-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-core-styles.js';
+import { iconStyles } from './styles/vaadin-icon-base-styles.js';
 import { IconMixin } from './vaadin-icon-mixin.js';
 import { ensureSvgLiteral } from './vaadin-icon-svg.js';
 
@@ -54,6 +54,24 @@ import { ensureSvgLiteral } from './vaadin-icon-svg.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
@@ -66,7 +84,8 @@ class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   }
 
   static get styles() {
-    return iconStyles;
+    // Apply `super.styles` only if the fallback is used
+    return [iconStyles, super.styles].filter(Boolean);
   }
 
   static get lumoInjector() {

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-alpha8",
+  "version": "25.0.0-beta1",
   "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-alpha8/#/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-beta1/#/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-alpha8/#/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-alpha8/#/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-beta1/#/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-beta1/#/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-alpha8/#/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-beta1/#/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-alpha8/#/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-beta1/#/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-alpha8",
+  "version": "25.0.0-beta1",
   "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-alpha8/#/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-beta1/#/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-alpha8/#/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-alpha8/#/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-beta1/#/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-beta1/#/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-alpha8/#/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-beta1/#/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/styles/vaadin-icon-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @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-core-styles.js

@@ -1,49 +0,0 @@
-/**
- * @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`
-  :host {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    vertical-align: middle;
-    width: 24px;
-    height: 24px;
-    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);
-  }
-`;

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';