How to correctly design/color icon to be visible across themes?

Yeah, the first part from MDN is simply not true. I always specify my SVG icons as

"icons": {
	"1": "/icon.svg"
},

and never had a problem with is (except that chrome can’t handle SVGs at all).