What is the best way to create vector icons?

Question

css

I would like to make all the icons vector-based, but I ran into a problem.
Usually converted to a font on icomoon.io. Very convenient, you can change the color on the fly. But bad luck, in some browsers this font is not displayed. Moreover, the options are unexpected - it happens not only in IE, but also in chrome. In IE9, this is almost always a problem. So I don't understand what it depends on. Maybe the browser version.
I don't really like inserting pure svg. I got used to the dreamweaver, and if you insert it through an svg file, then in the project files panel, each svg is pulled up as a separate file. As a result, we have a sheet of files, among which you can still get to the desired style.css.
Maybe there are other impenetrable and convenient ways?

Answer 1

I just use svg, and this problem was. If the font is not displayed, then the computer simply does not have this font. It is better to make it a rule to use only Arial and Times New Roman. If you need a different font, then convert it to curves, then the icon will be font-independent and will open on any machine.

Answer 2

Perhaps this option seems to me the most optimal so far:
.icon {
background-image: url(your.png); /* PNG for IE6-8 */
background-image: url(your.svg), none;
}

Answer 3

Can you see examples of icomoon.io not working (not working correctly)?
I've used it and have never noticed any problems with it.
Maybe just some kind of bug with connecting the font in CSS?