It's already been mentioned that instead of box-shadow perhaps outline is a better choice for the image frame.
For the icons, I don't understand why the author believes that they need to have two copies of the icon inside the SVG. You can style every property of every element using CSS. If your icon is a single path element, it should remain a path element and be styled something like this:
Although that's a good call as I hadn't considered that, I still don't see why you want to use a mask. Surely you just need two tiny SVG files and show only one or the other. And since they're tiny, I would absolutely embed them directly, which is why I didn't consider the case of an img tag.
For the icons, I don't understand why the author believes that they need to have two copies of the icon inside the SVG. You can style every property of every element using CSS. If your icon is a single path element, it should remain a path element and be styled something like this:
Of course it's possible that I'm missing something, but if all you want is changing color on hover, duplicating the item and using a mask is overkill.