diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index dd2a60a831..df0b688487 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -220,8 +220,8 @@ export class IonFab {
}
export declare interface IonFabButton extends Components.IonFabButton {
}
-@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
-@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
export class IonFabButton {
ionFocus!: EventEmitter;
ionBlur!: EventEmitter;
diff --git a/core/api.txt b/core/api.txt
index 0feb35cf61..9d4ad6a236 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -354,6 +354,7 @@ ion-fab,method,close,close() => Promise
ion-fab-button,shadow
ion-fab-button,prop,activated,boolean,false,false,false
+ion-fab-button,prop,closeIcon,string,'close',false,false
ion-fab-button,prop,color,string | undefined,undefined,false,false
ion-fab-button,prop,disabled,boolean,false,false,false
ion-fab-button,prop,download,string | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index d1d3d3e874..27e506e189 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -688,6 +688,10 @@ export namespace Components {
* If `true`, the fab button will be show a close icon.
*/
"activated": boolean;
+ /**
+ * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
+ */
+ "closeIcon": string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
@@ -725,7 +729,7 @@ export namespace Components {
*/
"show": boolean;
/**
- * The size of the button. Set this to `small` in order to have a mini fab.
+ * The size of the button. Set this to `small` in order to have a mini fab button.
*/
"size"?: "small";
/**
@@ -3964,6 +3968,10 @@ declare namespace LocalJSX {
* If `true`, the fab button will be show a close icon.
*/
"activated"?: boolean;
+ /**
+ * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
+ */
+ "closeIcon"?: string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
@@ -4009,7 +4017,7 @@ declare namespace LocalJSX {
*/
"show"?: boolean;
/**
- * The size of the button. Set this to `small` in order to have a mini fab.
+ * The size of the button. Set this to `small` in order to have a mini fab button.
*/
"size"?: "small";
/**
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index bc904d0850..5a906a3a6a 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -93,10 +93,17 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
- * The size of the button. Set this to `small` in order to have a mini fab.
+ * The size of the button. Set this to `small` in order to have a mini fab button.
*/
@Prop() size?: 'small';
+ /**
+ * The icon name to use for the close icon. This will appear when the fab button
+ * is pressed. Only applies if it is the main button inside of a fab containing a
+ * fab list.
+ */
+ @Prop() closeIcon = 'close';
+
/**
* Emitted when the button has focus.
*/
@@ -156,7 +163,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
>
-
+
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index 991205e8f8..e0d8232f9b 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -140,6 +140,7 @@ export class FabButtonExample {
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
+| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `'close'` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
@@ -149,7 +150,7 @@ export class FabButtonExample {
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
-| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
+| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |