fix(action): reflect the icon property (#11282)

**Related Issue:** #11092

## Summary

- reflect icon property
- add test

Author: driskull

packages/calcite-components/src/components/action/action.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed } from "../../tests/commonTests";
+import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed, reflects } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -42,6 +42,55 @@ describe("calcite-action", () => {
     ]);
   });
 
+  describe("reflects", () => {
+    reflects("calcite-action", [
+      {
+        propertyName: "active",
+        value: true,
+      },
+      {
+        propertyName: "alignment",
+        value: "end",
+      },
+      {
+        propertyName: "appearance",
+        value: "solid",
+      },
+      {
+        propertyName: "compact",
+        value: true,
+      },
+      {
+        propertyName: "disabled",
+        value: true,
+      },
+      {
+        propertyName: "icon",
+        value: "hamburger",
+      },
+      {
+        propertyName: "iconFlipRtl",
+        value: true,
+      },
+      {
+        propertyName: "indicator",
+        value: true,
+      },
+      {
+        propertyName: "loading",
+        value: true,
+      },
+      {
+        propertyName: "scale",
+        value: "m",
+      },
+      {
+        propertyName: "textEnabled",
+        value: true,
+      },
+    ]);
+  });
+
   describe("renders", () => {
     renders("calcite-action", { display: "flex" });
   });

packages/calcite-components/src/components/action/action.tsx

@@ -76,7 +76,7 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
   @property({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display. */
-  @property() icon: IconNameOrString;
+  @property({ reflect: true }) icon: IconNameOrString;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @property({ reflect: true }) iconFlipRtl = false;