Render children nodes in React component when icon is missing

packages/react-demo/src/App.js

@@ -80,6 +80,11 @@ class CheckboxIcon extends React.Component {
 }
 
 function App() {
+	// Debug logging for testing references, which cannot be reliably tested with unit tests
+	console.log('References that should be logged: valid icon');
+	console.log('References that might be logged: missing icon');
+	console.log('References that should not be logged: missing text icon');
+
 	return (
 		<div className="App">
 			<section className="icon-24">
@@ -120,6 +125,8 @@ function App() {
 				</div>
 			</section>
 
+			<InlineDemo />
+
 			<section>
 				<h1>Tests</h1>
 				<p>
@@ -135,6 +142,11 @@ function App() {
 					Home icon! 24px icon in 16px text with 24px line height,
 					aligned using inline style.
 				</p>
+				<p>
+					Empty icon (span): <Icon />
+					<br />
+					Empty icon (emoji): <Icon>😀</Icon>
+				</p>
 				<p>
 					Clickable icon (testing events and style): <CheckboxIcon />
 				</p>
@@ -171,9 +183,28 @@ function App() {
 					<Icon
 						icon="demo"
 						ref={(element) => {
+							console.log('Ref: valid icon');
 							element.style.border = '1px solid red';
 						}}
 					/>
+					<br />
+					Reference to missing icon:{' '}
+					<Icon
+						ref={(element) => {
+							console.log('Ref: missing icon');
+							element.style.border = '1px solid red';
+						}}
+					/>
+					<br />
+					Reference to missing icon with fallback text:{' '}
+					<Icon
+						ref={(element) => {
+							console.log('Ref: missing text icon');
+							element.style.border = '1px solid red';
+						}}
+					>
+						😀
+					</Icon>
 				</p>
 				<p>
 					Testing replacing ids in icons: <Icon icon="noto-robot" />{' '}
@@ -182,8 +213,6 @@ function App() {
 					<Icon icon="noto-robot" id="test2" /> (string)
 				</p>
 			</section>
-
-			<InlineDemo />
 		</div>
 	);
 }

packages/react/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/react",
 	"description": "Iconify icon component for React.",
 	"author": "Vjacheslav Trushkin",
-	"version": "2.0.0-rc.8",
+	"version": "2.0.0-rc.9",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

packages/react/src/icon.ts

@@ -110,9 +110,19 @@ const component = (
 	const icon =
 		typeof props.icon === 'string'
 			? storage[props.icon]
-			: fullIcon(props.icon);
-	if (!icon) {
-		return React.createElement('span');
+			: typeof props.icon === 'object'
+			? fullIcon(props.icon)
+			: null;
+
+	// Validate icon object
+	if (
+		typeof icon !== 'object' ||
+		icon === null ||
+		typeof icon.body !== 'string'
+	) {
+		return props.children
+			? (props.children as JSX.Element)
+			: React.createElement('span', {});
 	}
 
 	const customisations = merge(

packages/react/tests/icon.test.js

@@ -66,6 +66,41 @@ describe('Creating component', () => {
 			children: null,
 		});
 	});
+
+	test('empty icon', () => {
+		const component = renderer.create(<Icon />);
+		const tree = component.toJSON();
+
+		expect(tree).toMatchObject({
+			type: 'span',
+			props: {},
+			children: null,
+		});
+	});
+
+	test('empty icon with children', () => {
+		// Missing 'icon' property, should render children
+		const component = renderer.create(
+			<Icon>
+				<i class="fa fa-home" />
+			</Icon>
+		);
+		const tree = component.toJSON();
+
+		expect(tree).toMatchObject({
+			type: 'i',
+			props: {},
+			children: null,
+		});
+	});
+
+	test('empty icon with text children', () => {
+		// Missing 'icon' property, should render children
+		const component = renderer.create(<Icon>icon</Icon>);
+		const tree = component.toJSON();
+
+		expect(tree).toMatch('icon');
+	});
 });
 
 describe('Using storage', () => {