diff --git a/src/components/call-controls.ts b/src/components/call-controls.ts
index be12071b..90690ae3 100644
--- a/src/components/call-controls.ts
+++ b/src/components/call-controls.ts
@@ -23,6 +23,8 @@ import {
 import { hasPopOutAnimationEnded } from '../utils/animation.js';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';
 
+import './icon.js';
+
 /**
  * The on-screen overlay shown during a two-way audio call: a centered pill
  * whose contents depend on call state. Pre-answer (inbound ringing) shows
@@ -215,7 +217,7 @@ export class AdvancedCameraCardCallControls extends LitElement {
           }
         }}
       >
-        <ha-icon icon=${icon}></ha-icon>
+        <advanced-camera-card-icon .icon=${{ icon }}></advanced-camera-card-icon>
       </ha-icon-button>
     `;
   }
diff --git a/tests/components/call-controls.browser.test.ts b/tests/components/call-controls.browser.test.ts
new file mode 100644
index 00000000..eede8c34
--- /dev/null
+++ b/tests/components/call-controls.browser.test.ts
@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import '../../src/components/call-controls';
+
+import type { AdvancedCameraCardCallControls } from '../../src/components/call-controls';
+import { deepQueryAll } from '../browser/dom';
+import { defineHAElementStubs } from '../browser/ha-element-stubs';
+
+const mount = async (options?: {
+  answered?: boolean;
+}): Promise<AdvancedCameraCardCallControls> => {
+  defineHAElementStubs();
+
+  const controls = document.createElement('advanced-camera-card-call-controls');
+  controls.active = true;
+  controls.answered = options?.answered ?? true;
+  document.body.append(controls);
+
+  await controls.updateComplete;
+  return controls;
+};
+
+const getButtonIcons = (controls: AdvancedCameraCardCallControls): (string | null)[] =>
+  deepQueryAll(controls, 'ha-icon-button').map((button) => {
+    // Verify the icons are not ha-icon.
+    expect(button.querySelector('ha-icon')).toBeNull();
+
+    const icon = button.querySelector('advanced-camera-card-icon');
+    return icon?.icon?.icon ?? null;
+  });
+
+afterEach(() => {
+  document.querySelectorAll('advanced-camera-card-call-controls').forEach((controls) => {
+    controls.remove();
+  });
+});
+
+describe('AdvancedCameraCardCallControls', () => {
+  it('should render the answered buttons with the card icon component', async () => {
+    const controls = await mount();
+
+    expect(getButtonIcons(controls)).toEqual([
+      'mdi:phone-hangup',
+      'mdi:microphone-off',
+      'mdi:volume-off',
+    ]);
+  });
+
+  it('should render the unanswered buttons with the card icon component', async () => {
+    const controls = await mount({ answered: false });
+
+    expect(getButtonIcons(controls)).toEqual(['mdi:phone-hangup', 'mdi:phone']);
+  });
+});