Use Icomoon external svg file with <use>

Try to load external SVG icon with no html coding, just using my child functions.php file.

I can get the icon with link to be clickable, so link to e.g. Facebook is working, can set background color, so know it loads css file, but the icon does not show.

I used Icomoon to get the external SVG. All files are now in the same folder as the functions.php file.

In Icomoons help file it says: After copying this SVG, you can reference your glyphs like the following:

If you prefer to reference an external SVG (containing ) instead of embedding it in HTML, you will need to use svgxuse.js in order to support IE 9+. This demo references the symbol-defs.svg file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work properly.

I do not care about IE9 now, and will not use svgxuse.js

So, I use facebook-square.svg icon from Icomoon.

Icomoons CSS for the classes provided used in my child style.css, which seem to work since I can see background color changes. symbol-defs.svg file from Icomoon.

Symbol-defs.svg looks like this (but have more SVG's in there):

svg aria-hidden=true style=position: absolute; width: 0; height: 0; overflow: hidden; version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink
defs
symbol id=fa-facebook-square viewBox=0 0 28 28
path d=M28 21v2c0 0.547-0.453 1-1 1h-26c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h26c0.547 0 1 0.453 1 1zM28 15v2c0 0.547-0.453 1-1 1h-26c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h26c0.547 0 1 0.453 1 1zM28 9v2c0 0.547-0.453 1-1 1h-26c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h26c0.547 0 1 0.453 1 1zM28 3v2c0 0.547-0.453 1-1 1h-26c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h26c0.547 0 1 0.453 1 1z/path
/symbol
/defs
/svg

I had a working function in functions.php for social icons using font awesome webfonts, and now I am trying to replace that with using SVG icon. See my php function below, and the first output line in the end are my try to switch the facebook webfont icon to now use external SVG with :

use xlink:href=symbol-defs.svg#fa-facebook-square

Does anybody see why this is not showing the SVG ? I have tried and read a lot of CSS tips and tricks, and to me it seems like this is the way to do it. Thanks for reading!

code for shortcode created in functions.php:

add_shortcode( 'social-follow-buttons', function( $atts ){
// Extract and Define Defaults
extract( shortcode_atts( array(
    'fb_class' = 'fb-follow-icon',
    'twitter_class' = 'twitter-follow-icon',
), $atts ) );

 if( is_singular() ){
    // If is a Single CPT, Post, Page, etc.
    $url   = get_permalink();
    $title = get_the_title();
}  else if ( is_front_page() ){
    // If this is the Main Page
    $url   = home_url();
    $title = get_bloginfo( 'title' );
}  else {
    // All other Accounts (Archives, Blog Page, etc.)
    $url   = ( is_ssl() ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    $title = get_bloginfo( 'title' );
}
$facebookURL = 'https://www.facebook.com/mywebsite.com';
$twitterURL = 'https://www.twitter.com/mywebsite';
    
$output .= sprintf( 'a class=%s href=%s target=_blank rel=nofollow noopener noreferrer svg class=fa fa-facebook-squareuse xlink:href=symbol-defs.svg#fa-facebook-square/use/svg/a', $fb_class, $facebookURL );

$output .= sprintf( 'a class=%s href=%s target=_blank rel=nofollow noopener noreferrer i class=fab fa-twitter-square /i /a', $twitter_class, $twitterURL );
  
return $output;
} );

The shortcode [social-follow-buttons] is then used in a theme widget or page builder (in this case elementor). In this case only the twitter webfont will show.