Here's a css color icon example, which looks similar on both Firefox and Chrome.
\FE0E turns off the Firefox emoticon feature, so that you can theme the icon.
The ;color: is for Chrome, so that it doesn't monochrome all of the icons.
If those are used together, that icon appears the same on firefox/chrome/edge/opera, etc...
Or, if the Firefox emoticon is useful, Chrome still needs the color.
li a[href$="/"]::before {content:"\1f4c1\FE0E ";color:#FB0}
a[href*="."]::before {content:"\1f4c4 ";color:#BCC}
a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:"\1f4f7 ";color:black}
a[href$=".mp3"]::before, a[href$=".aac"]::before, a[href$=".m4a"]::before, a[href$=".ogg"]::before {content:"\1f50a\FE0E ";color:green}
a[href$=".mp4"]::before, a[href$=".avi"]::before, a[href$=".webm"]::before, a[href$=".mkv"]::before {content:"\1f4fa ";color:teal}
a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before, a[href$=".zip"]::before {content:"\1f381 ";color:brown}
a[href$=".exe"]::before, a[href$=".vbs"]::before, a[href$=".bat"]::before, a[href$=".ps1"]::before, a[href$=".js"]::before, a[href$=".apk"]::before {content:"\1f537 ";color:#5AE}
nav a[href*="."]::before {content:""}
img+div a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:""}
It is an efficient solution, utilizing icons already present in the client.