@vaadin/icon 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -24,29 +24,6 @@ Once installed, import the component in your application:
 import '@vaadin/icon';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/icon/vaadin-icon.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/icon/theme/material/vaadin-icon.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/icon/theme/lumo/vaadin-icon.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/icon/src/vaadin-icon.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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,21 +37,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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,60 @@
+/**
+ * @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: 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;
+    -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);
+  }
+
+  .baseline {
+    order: -1;
+  }
+
+  .baseline::before {
+    content: '\\2003' / '';
+    display: inline-block;
+    width: 0;
+  }
+`;

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.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { IconMixin } from './vaadin-icon-mixin.js';
@@ -47,7 +46,7 @@ import { IconMixin } from './vaadin-icon-mixin.js';
  * }
  * ```
  */
-declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(IconMixin(HTMLElement)))) {}
+declare class Icon extends ThemableMixin(ElementMixin(IconMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-icon.js

@@ -4,15 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-iconset.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
+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 { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-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 { IconMixin } from './vaadin-icon-mixin.js';
-import { iconStyles } from './vaadin-icon-styles.js';
-
-registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });
+import { ensureSvgLiteral } from './vaadin-icon-svg.js';
 
 /**
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -56,39 +57,50 @@ registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });
  * @customElement
  * @extends HTMLElement
  * @mixes IconMixin
- * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Icon extends IconMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
-  static get template() {
+class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-icon';
+  }
+
+  static get styles() {
+    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="[[__computeViewBox(size, __viewBox)]]"
-        preserveAspectRatio="[[__computePAR(__defaultPAR, __preserveAspectRatio)]]"
-        fill$="[[__fill]]"
-        stroke$="[[__stroke]]"
-        stroke-width$="[[__strokeWidth]]"
-        stroke-linecap$="[[__strokeLinecap]]"
-        stroke-linejoin$="[[__strokeLinejoin]]"
+        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)}"
+        stroke-linecap="${ifDefined(this.__strokeLinecap)}"
+        stroke-linejoin="${ifDefined(this.__strokeLinejoin)}"
         aria-hidden="true"
       >
-        <g id="svg-group"></g>
-        <g id="use-group" visibility$="[[__computeVisibility(__useRef, svg)]]">
-          <use href$="[[__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>
 
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get is() {
-    return 'vaadin-icon';
-  }
 }
 
 defineCustomElement(Icon);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/icon",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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/24.8.4/#/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-alpha10/#/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/24.8.4/#/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/24.8.4/#/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-alpha10/#/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-alpha10/#/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/24.8.4/#/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-alpha10/#/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/24.8.4/#/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-alpha10/#/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": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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/24.8.4/#/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-alpha10/#/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/24.8.4/#/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/24.8.4/#/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-alpha10/#/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-alpha10/#/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/24.8.4/#/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-alpha10/#/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();
-}

package/src/vaadin-lit-icon.js

@@ -1,61 +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 './vaadin-iconset.js';
-import { html, LitElement } from 'lit';
-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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { IconMixin } from './vaadin-icon-mixin.js';
-import { iconStyles } from './vaadin-icon-styles.js';
-
-/**
- * LitElement based version of `<vaadin-icon>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment not intended for publishing to npm.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static styles = iconStyles;
-
-  /** @protected */
-  render() {
-    return html`
-      <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)}"
-        fill="${ifDefined(this.__fill)}"
-        stroke="${ifDefined(this.__stroke)}"
-        stroke-width="${ifDefined(this.__strokeWidth)}"
-        stroke-linecap="${ifDefined(this.__strokeLinecap)}"
-        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>
-      </svg>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-icon';
-  }
-}
-
-defineCustomElement(Icon);
-
-export { Icon };

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

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

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

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

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,12 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-icon',
-  css`
-    :host {
-      width: 24px;
-      height: 24px;
-    }
-  `,
-  { moduleId: 'material-icon' },
-);

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

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

package/theme/material/vaadin-icon.js

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

package/theme/material/vaadin-lit-icon.d.ts

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

package/theme/material/vaadin-lit-icon.js

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

package/vaadin-lit-icon.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-icon.js';

package/vaadin-lit-icon.js

@@ -1,3 +0,0 @@
-import './theme/lumo/vaadin-lit-icon.js';
-
-export * from './src/vaadin-lit-icon.js';