fix: reflect icon property as an attribute (#6327) (#6328)

Co-authored-by: Tomi Virkki <[email protected]>
vaadin · Aug 9, 2023 · 0a9e65b · 0a9e65b
1 parent 1853b0a
commit 0a9e65b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/icon/src/vaadin-icon.d.ts b/packages/icon/src/vaadin-icon.d.ts
@@ -57,6 +57,8 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
    * values provided by the corresponding `vaadin-iconset` element.
    *
    * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
+   *
+   * @attr {string} icon
    */
   icon: string | null;
 

diff --git a/packages/icon/src/vaadin-icon.js b/packages/icon/src/vaadin-icon.js
@@ -108,9 +108,13 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
        * values provided by the corresponding `vaadin-iconset` element.
        *
        * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
+       *
+       * @attr {string} icon
+       * @type {string}
        */
       icon: {
         type: String,
+        reflectToAttribute: true,
         observer: '__iconChanged',
       },
 

diff --git a/packages/icon/test/icon.test.js b/packages/icon/test/icon.test.js
@@ -146,6 +146,13 @@ describe('vaadin-icon', () => {
         svgElement = icon.shadowRoot.querySelector('svg');
       });
 
+      it('should reflect the icon as an attribute', () => {
+        icons.forEach((svgIcon) => {
+          icon.icon = svgIcon.getAttribute('id');
+          expect(icon.getAttribute('icon')).to.equal(icon.icon);
+        });
+      });
+
       it('should render icon from the iconset', () => {
         icons.forEach((svgIcon) => {
           icon.icon = svgIcon.getAttribute('id');