[SvgIcon] `titleAccess` prop not working properly in conjunction with`component` prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I use the SvgIcon with component prop like:

<SvgIcon
  component={MySvgIcon}
  titleAccess="My title"
/>

the aria-hidden="true" is removed and role="img" added, but there is no <title>My title</title> tag added to the svg

Expected behavior 🤔

titleAccess prop should add the <title>my title here</title> tag to the SVG element.

Steps to reproduce 🕹

Steps:

1. Import custom SVG icon using webpack svgr plugin as ReactComponent"

import { ReactComponent as StarIcon } from './star.svg';

2. Use the imported SVG in the component prop in SvgIcon component with titleAccess

<SvgIcon
  component={StarIcon}
  titleAccess="My title"
/>

Context 🔦

I want to use my custom SVG icons with the Material UI SvgIcon component and make it fully accessible.

Your environment 🌎

Start at the SvgIcon component's handling of titleAccess and the component prop, then reproduce the case with a custom ReactComponent imported from star.svg. Done means the rendered SVG includes a <title>My title</title> while retaining the expected accessible role and aria behavior.