fix: Do not use bare ha-icon for call controls (#2738)

- Closes: #2735

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']);
+  });
+});