Svg, fonts, png, background - how to insert icons correctly?

Question

css

Previously, I somehow didn’t take a steam bath and inserted everything with png, but then I found out about other methods and abandoned the layout for a while. Now, when you have to type something up, the question is always how to insert various icons, since it is very difficult to decide on a bunch of ways. Recently I read in some topic that no one uses fonts now, but I did not understand why. In general, I ask you to explain in what cases what is better to use now and how. Since with the same svg there are several options (inline, sprite, background)

Answer 1

https://css-tricks.com/svg-sprites-use-better-icon...

Answer 2

Depending on what you need from svg. For example, I insert via base64 if I don't need to control the icon via css. In this case, you can control the size through background-size.

Answer 3

Do not forget about mandatory testing of svg-shares through real mobs. devices! I definitely do this after two projects, where would-be svg fans fucked these would-be sprites for the most part and clients yelled that the tablet was reloading the page. A piece of code weighing 3Mb plus 30-50 additional. requests per page - that's what it looked like. We changed it to ONE png-sprite weighing 120kb and 8 lines in css - the tablets took off .... The client rammed two VSOP boxes.
I don't mind fancy svgs. I am not a supporter of conservatism. I just like to drink expensive cognac.