<Icon> title prop doesn't work if the svg's title contains a dash

[willyrk1]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?

<Icon> has a title prop that replaces the icon name using regex. But that regex is matching using \w+ so it won't match on names with dashes, e.g. "x-circle", or other non \w characters which are allowed in icon names. In those cases, the title prop does nothing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Choose an icon whose name includes a dash character, e.g. "x-circle". Use that icon in an <Icon> component, e.g. <Icon svg={mXCircle} title='test' />. The resulting HTML will still include the icon name as the <svg> <Title> instead of "test":

What is the expected behavior?

The <svg> <Title> would contain the specified title prop instead of the name of the icon regardless of special characters in the icon name.

Which versions of MDL, and which browser / OS are affected by this issue? Did this work in previous versions of MDL?

There is only one commit with <Icon>