When using a CDN
The most common issue why the icons are hidden, is likely because of a CORS issue related to Rey’s SVG icon sprites and the CDN that is hosting it.
This problem is related to the fact that an SVG file (which inside has xml code) is linked from an external source (the CDN) and the browser blocks the svg sprite as a security measure.
The most obvious solution is to find if there’s any way to add a *.svg wildcard to exclude SVG files from being grabbed to the CDN. If you’re using a caching plugin with CDN setup, it’s likely it’ll have such option.
If the CDN is a hosting feature, try asking your hosting’s support if there’s any way to exclude .svg files. If there isn’t, i’m afraid the only way to show them is to disable CDN.
In case you’re wondering why i chose to use SVG icon sprites, it’s because it’s the most performant way of adding icons, and in fact a standard. However because they weren’t as supported in the past, the paradigm was to use font icons. Unfortunately they’re the worst solution because they’re monochrome and usually you need to load entire libraries of icons, maybe to just one 2-3 of them.
Solutions for various plugins:
Breeze: In the plugin’s settings look for CDN tab, and in the Exclude Content field, add .php,.svg eg: https://d.pr/i/2XMRJW .
WP Super Cache: In the plugin’s settings look for CDN tab, and in the Exclude if substring field, add .php,.svg eg: https://d.pr/i/HYyjdU .
WP Rocket: CDN tab > Exclude files from CDN and inside add *.svg eg: https://d.pr/i/skIthk .
BunnyCDN: https://d.pr/i/oV6uVl .
GoDaddy hosting. Some hosting packages from GoDaddy have a built-in CDN that unfortunately cannot exclude any file. The solution is to just disable CDN option in the hosting panel.
Or, try using adding this line below (in the child theme’s functions.php) which will load a JS based solution that iterates all icon paths and replaces them with the local one.
add_filter('reycore/svg_path/fix_cdn_path', '__return_true');The SVG code is not unique
One common reason why svg icons won’t show up is the fact that their code is conflicting with other icons.
Given this example https://d.pr/i/5Ce4Ik , as you can see there are 2 css classes that clip path on a supposedly unique element’s id (in this case, the clipPath tag).
This code is highly vulnerable to conflicts and could cause problems if more than one icon is used in the page, in case the 2nd one also contains such non-unique css classes or ids.
The solution is to cleanup the svg code (open with an editor) and replace the css classes and ids with unique names.
Or, retry exporting the icon from the app you used for exporting it.