diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 3d5a64200c3..ca7efa30fb9 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -341,7 +341,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
     this.inputsChanged();
     this.buttonsChanged();
   }
diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.tsx
similarity index 80%
rename from core/src/components/alert/test/alert.spec.ts
rename to core/src/components/alert/test/alert.spec.tsx
index d7c8abb25ca..31c3872e6c9 100644
--- a/core/src/components/alert/test/alert.spec.ts
+++ b/core/src/components/alert/test/alert.spec.tsx
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { config } from '../../../global/config';
 import { Alert } from '../alert';
+import { h } from '@stencil/core';
 
 describe('alert: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
 });