Rocket.Chat/client/components/Header/HeaderIcon.tsx

import { Box, Icon } from '@rocket.chat/fuselage';
import React, { FC, isValidElement, ReactElement } from 'react';

type HeaderIconProps = { icon: ReactElement | { name: string; color?: string } | null };

const HeaderIcon: FC<HeaderIconProps> = ({ icon }) =>
	icon && (
		<Box
			display='flex'
			flexShrink={0}
			alignItems='center'
			size={18}
			overflow='hidden'
			justifyContent='center'
		>
			{isValidElement(icon) ? (
				icon
			) : (
				<Icon color='info' size='x18' {...{ name: (icon as any).name }} />
			)}
		</Box>
	);

export default HeaderIcon;