This doesn’t seem too cumbersome, but for each icon you need two files with differently colored icons. To make a change to the color, a new file needs to be created.

The beauty of using the mask and background-color properties, is that an SVG can be changed to any color. This limits the number of files you have to keep track of, but more importantly grants more flexibility and can lead to more organized code.

To use this technique, set the value of mask to the correct file and set the background-color as desired. The SVG will act as mask and the background-color will only be visible where the icon is. Define a different background-color for :hover to switch between colors on hover.