feat(action): Add icon property to display calcite-icon.

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

@@ -26,6 +26,14 @@ describe("calcite-action", () => {
     expect(isVisible).toBe(false);
   });
 
+  it("should have icon container with icon prop", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-action icon="hamburger"></calcite-action>`);
+
+    const iconContainer = await page.find("calcite-action >>> .icon-container");
+    expect(iconContainer).not.toBeNull();
+  });
+
   it("should have icon container with calcite-icon", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-action><calcite-icon icon="hamburger" scale="s"></calcite-icon></calcite-action>`);
@@ -42,7 +50,7 @@ describe("calcite-action", () => {
     expect(iconContainer).not.toBeNull();
   });
 
-  it("should not have icon container if no calcite-icon present", async () => {
+  it("should not have icon container if no icon present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-action></calcite-action>`);
 

src/components/calcite-action/calcite-action.stories.ts

@@ -30,6 +30,10 @@ const createAttributes: () => Attributes = () => [
     name: "disabled",
     value: boolean("disabled", false)
   },
+  {
+    name: "icon",
+    value: text("icon", "beaker")
+  },
   {
     name: "indicator",
     value: boolean("indicator", false)
@@ -60,5 +64,4 @@ const createAttributes: () => Attributes = () => [
   }
 ];
 
-export const basic = () =>
-  create("calcite-action", createAttributes(), `<calcite-icon scale="s" icon="beaker"></calcite-icon>`);
+export const basic = () => create("calcite-action", createAttributes(), "");

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

@@ -43,6 +43,11 @@ export class CalciteAction {
    */
   @Prop({ reflect: true }) disabled = false;
 
+  /**
+   * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+   */
+  @Prop() icon?: string;
+
   /**
    * Indicates unread changes.
    */
@@ -120,9 +125,12 @@ export class CalciteAction {
   }
 
   renderIconContainer(): VNode {
-    const { loading } = this;
+    const { el, loading, icon } = this;
 
-    const calciteLoaderNode = <calcite-loader is-active inline></calcite-loader>;
+    const calciteLoaderNode = loading ? <calcite-loader is-active inline></calcite-loader> : null;
+    const calciteIconNode = icon ? <calcite-icon icon={icon} scale="s"></calcite-icon> : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || el.querySelector("calcite-icon, svg");
 
     const slotContainerNode = (
       <div
@@ -134,15 +142,10 @@ export class CalciteAction {
       </div>
     );
 
-    const iconNode = loading
-      ? calciteLoaderNode
-      : this.el.querySelector("calcite-icon, svg")
-      ? slotContainerNode
-      : null;
-
-    return iconNode ? (
+    return hasIconToDisplay ? (
       <div key="icon-container" aria-hidden="true" class={CSS.iconContainer}>
         {iconNode}
+        {slotContainerNode}
       </div>
     ) : null;
   }