AddAPhoto Icon clip-path causes icon to not display under specific circumstances

[kevinnorris]

If you render the AddAPhoto icon in a parent that toggles visibility between hidden and visible, then render multiple of these components on the screen all icons are hidden if the first one is hidden. No matter how you toggle the remaining component.

If the clip-path is removed from the icon then it renders properly.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The icons should hide and show irrespective of other components on the page.

Current Behavior

The first icon toggles correctly and all other instances of the icon only toggle properly if the first one is visible.

Steps to Reproduce

Link: https://codesandbox.io/s/o5y25ll0jq

1. The second icon in the "with clip-path" column should display, it does not.
2. Click show in the "with clip-path" column and the second icon will now be toggleable
3. Hide the first icon again and the second icon once again is hidden no matter the toggle

Context

We have a page with multiple components that transition between visibility and these components have icons in them. The AddAPhoto icon no longer displays properly due to the clip-path.

Your Environment

Tech	Version
OS	Mac High Sierra
Material-UI/icons	v2.0.1
Chrome	68.0.3440.84
Firefox	61.0.1

[oliviertassinari]

@kevinnorris The clip-path comes from the material design icons of Google. We don't add them on purpose. We have tried to remove them in the past, but it was breaking some icons. We gonna have to try harder to remove them.

[kevinnorris]

Would you be open to a PR that removes clip-path from the AddAPhoto icon?

[oliviertassinari]

@kevinnorris The icons are automatically generated. If you find a way to update the script that doesn't alter the visual output, definitely!