CSS ICON is good for cases like, if you want to animate it, or style it on hover state in a particular way, of you need to prototype something fast on codepen where you don't want external assets files or long long pasted-in SVG code, this is much better.

The shortcoming is that you can't do any icon in the world with css. But if you already find this is equivalently appearance wise, the performance and code hygiene is much better than SVG or icon fonts.

also icon fonts are the worst way to do icon, here is the article about why: https://github.com/blog/2112-delivering-octicons-with-svg

I dislike using specialist fonts because it's overloading what a character is supposed to show. If the user doesn't have the webfont, either because it was blocked or because of support reasons, the page becomes a mess of alphabet soup.

SVG

by my opinion

if you want something found on a CDN and as a result more likely cached in browsers (or pre-loaded via an extension), font awesome is a safe bet

If you want the most pure option, SVG (hint, change the background of the css icon boxes to see why, the usage of background-colored boxes everywhere is pretty damaging if you want to use it on anything other than flat colors)

if you want the icon to interact with your content (want text in a speech bubble? changing numbers? etc?) or to be quickly tailorable, then probably CSS icons