diff --git a/CHANGELOG.md b/CHANGELOG.md
index a134fb3f4ac..52e4b5db794 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
**Bug fixes**
- Fixed custom color render of `EuiIcon` app (two-tone) icons ([#4104](https://github.com/elastic/eui/pull/4104))
-
+- Changed `iconType` prop to be `required` in `EuiButtonIcon` ([#4106](https://github.com/elastic/eui/pull/4106))
## [`29.4.0`](https://github.com/elastic/eui/tree/v29.4.0)
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 1bc0254d9c4..6cae9bb61a3 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -6,7 +6,13 @@ exports[`EuiButtonIcon is rendered 1`] = `
class="euiButtonIcon euiButtonIcon--primary testClass1 testClass2"
data-test-subj="test subject string"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color accent is rendered 1`] = `
@@ -14,7 +20,13 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--accent"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color danger is rendered 1`] = `
@@ -22,7 +34,13 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--danger"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color disabled is rendered 1`] = `
@@ -30,7 +48,13 @@ exports[`EuiButtonIcon props color disabled is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--disabled"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color ghost is rendered 1`] = `
@@ -38,7 +62,13 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--ghost"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color primary is rendered 1`] = `
@@ -46,7 +76,13 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--primary"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color subdued is rendered 1`] = `
@@ -54,7 +90,13 @@ exports[`EuiButtonIcon props color subdued is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--subdued"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color success is rendered 1`] = `
@@ -62,7 +104,13 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--success"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color text is rendered 1`] = `
@@ -70,7 +118,13 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--text"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props color warning is rendered 1`] = `
@@ -78,7 +132,13 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
aria-label="button"
class="euiButtonIcon euiButtonIcon--warning"
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
@@ -88,7 +148,13 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
href="#"
rel="noopener noreferrer"
target="_blank"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props iconType is rendered 1`] = `
@@ -111,7 +177,13 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
class="euiButtonIcon euiButtonIcon--primary"
disabled=""
type="button"
-/>
+>
+
+
`;
exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
@@ -120,5 +192,11 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
class="euiButtonIcon euiButtonIcon--primary"
disabled=""
type="button"
-/>
+>
+
+
`;
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index f95eaa04fdd..f8efe7d3ee2 100644
--- a/src/components/button/button_icon/button_icon.test.tsx
+++ b/src/components/button/button_icon/button_icon.test.tsx
@@ -25,7 +25,9 @@ import { EuiButtonIcon, COLORS } from './button_icon';
describe('EuiButtonIcon', () => {
test('is rendered', () => {
- const component = render();
+ const component = render(
+
+ );
expect(component).toMatchSnapshot();
});
@@ -34,7 +36,7 @@ describe('EuiButtonIcon', () => {
describe('isDisabled', () => {
it('is rendered', () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
@@ -42,7 +44,12 @@ describe('EuiButtonIcon', () => {
it('renders a button even when href is defined', () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
@@ -63,7 +70,7 @@ describe('EuiButtonIcon', () => {
COLORS.forEach((color) => {
test(`${color} is rendered`, () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
@@ -74,7 +81,12 @@ describe('EuiButtonIcon', () => {
describe('href', () => {
it('secures the rel attribute when the target is _blank', () => {
const component = render(
-
+
);
expect(component).toMatchSnapshot();
@@ -85,7 +97,12 @@ describe('EuiButtonIcon', () => {
it('supports onClick and href', () => {
const handler = jest.fn();
const component = mount(
-
+
);
component.find('a').simulate('click');
expect(handler.mock.calls.length).toEqual(1);
@@ -94,7 +111,7 @@ describe('EuiButtonIcon', () => {
it('supports onClick as a button', () => {
const handler = jest.fn();
const component = mount(
-
+
);
component.find('button').simulate('click');
expect(handler.mock.calls.length).toEqual(1);
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index b44da6652d0..f05cf593e7e 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -50,7 +50,7 @@ export type EuiButtonIconColor =
| 'warning';
export interface EuiButtonIconProps extends CommonProps {
- iconType?: IconType;
+ iconType: IconType;
color?: EuiButtonIconColor;
'aria-label'?: string;
'aria-labelledby'?: string;
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 599a3020f62..1adf0691f8a 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -146,7 +146,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `