Add custom SVG icons to Social Icon MENU in WordPress Twenty Seventeen Child Theme

You don’t need to copy the inc/icon-functions.php file and include/require it from the child theme — remember that the parent theme will also load the same file/functions and that would result in a PHP error if you did not rename the functions in the copied file.

So try these:

1. (You’ve already done this properly, as I could see it. But just for completeness, I included this step.) Copy the SVG file (assets/images/svg-icons.svg) to your child theme and paste the Etsy’s SVG path to that svg-icons.svg file.

   <!-- In wp-content/themes/your-theme/assets/images/svg-icons.svg -->
   <symbol id="icon-etsy" viewBox="0 0 24 24">
   <path ...></path>
   </symbol>
   

2. Copy the twentyseventeen_include_svg_icons() function to your child theme functions.php file, then rename the function. Unhook twentyseventeen_include_svg_icons from wp_footer, then hook the renamed function to wp_footer:

   function my_theme_include_svg_icons() {
       // Define SVG sprite file.
       $svg_icons = get_stylesheet_directory() . '/assets/images/svg-icons.svg';
   
       // If it exists, include it.
       if ( file_exists( $svg_icons ) ) {
           require_once( $svg_icons );
       }
   }
   remove_action( 'wp_footer', 'twentyseventeen_include_svg_icons', 9999 );
   add_action( 'wp_footer', 'my_theme_include_svg_icons', 9999 );
   

3. Use the twentyseventeen_social_links_icons hook to add the Etsy icon to the icons array:

   add_filter( 'twentyseventeen_social_links_icons', function ( $icons ) {
       $icons['etsy.com'] = 'etsy';
       return $icons;
   } );
   

Save the theme functions file, reload your browser’s cache (if necessary) and check if the Etsy’s icon now appearing as expected. ( It should, though.. 🙂 )

And BTW, you don’t have to save the SVG file in assets/images, but for testing purposes, just use that default path.

Also, make sure your Social Links Menu has a menu item with etsy.com in the link URL. But you can also manually display the ‘E’ symbol like so:

echo twentyseventeen_get_svg( array( 'icon' => 'etsy', 'title' => __( 'Testing Etsy symbol', 'my-theme' ) ) );