catalog tile icon image is vertically offset

Describe the issue. What is the expected and unexpected behavior?
When supplying a custom image icon to the CatalogTile, the image is not correctly centered in the icon container in the same when as when supplying an image src url.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

Paste into catalog tile sample: https://patternfly-react.surge.sh/extensions/catalog-view-tile

import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
import pfLogo2 from './pfLogo2.svg';

WithMultipleIconBadges = () => (
<CatalogTile
id="multiIcon"
icon={<img src={pfLogo2} style=`width: '100%'`/>}
badges={[
<CatalogTileBadge title="Certified">
<CogIcon />
</CatalogTileBadge>,
<CatalogTileBadge title="USDA Approved">
<OutlinedCheckCircleIcon className="example-ok-icon" />
</CatalogTileBadge>
]}
title="Patternfly-React"
vendor={<React.Fragment>provided by <a href="[http://redhat.com](http://redhat.com/)">Red Hat</a></React.Fragment>}
description="description"
/>
)

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug

What is your product and what release version are you targeting?
OpenShift 4.7

Jira Issue: PF-2022

Start at the CatalogTile component in the react-catalog-view repository and reproduce the issue using the catalog view tile sample and the supplied custom image icon. Compare its vertical alignment with the image src URL case; done means both icons are centered consistently in the icon container.