This method is really good when your interface changes colour, in Pocket Casts our icons sometimes adapt to the colour of the podcast artwork so I've been using this a bit recently.
However, one issue we noticed: To get the colour picking working like this, your shapes need to be masks. When you export those assets as SVGs the masks are embedded, which isn't ideal. We ended up having to create a new version of each icon without the masks for exporting, not a huge deal but it was an extra step.
I've been playing with this idea in my template Blueprint and found out it isn't really worth the trouble.
I don't know how many icons you manage, but since you use one set of icons as masks for the implementation and the other one for mockups it doesn't need to be that much of a hassle.
But once you are working on an app with different coloured icons where they are not used as masks, its really convenient to set it up like mentioned in the article.
It is a pain in the ass during export. Since there is no easy way to export all the icons at once you need to change the colour for every icon set manually and then export again.
Can someone help me? I've tried to use this technique with strokes but doesn't work at all. Should I convert every icon to outline? Or you know something to fix that easily?
I've been doing this for a while now and it's fantastic.
Unfortunately, I learned the hard way that once you convert the entire Material Design 950+ icon set to use this method Sketch slows to a complete crawl. I had to move the icons out into a separate file and only bring in the ones I need on a case-by-case basis.
Nothing really new, i do this all day, every day. But you will get problems to export these assets to svg. But there is a solution color the mask and make them exportable as well.