How to implement my own icons instead of using the svg icon system

Question

From WordPress 4.9.2, I created a child theme for twentyseventeen. I noticed that it comes with its own SVG icon system for social media icons at the bottom of the page. I see some of that code initiated within the site-info.php file, in wp_nav_menu().

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
    wp_nav_menu( array(
        'theme_location' => 'social',
        'menu_class'     => 'social-links-menu',
        'depth'          => 1,
        'link_before'    => '<span class="screen-reader-text">',
        'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
    ) );
?>

I also see that svg-icons.svg is another file associated to the process.

I would like to use my own custom icons to talk with my custom links associated in the footer. What template techniques have worked well for replacing this SVG system? (again the goal if for me to use my own custom icons, which are .png images)

Answer 1

You could replace the function that is getting the svg image like so:

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_class'     => 'social-links-menu',
                            'depth'          => 1,
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span><img src="'.get_home_url().'/path/to/image.png">',
                        ) );
                    ?>
                </nav><!-- .social-navigation -->

Answer 2

You can use the wp_nav_menu_args filter.

namespace StackExchange\WordPress;

add_filter( 'wp_nav_menu_args', __NAMESPACE__ . '\wp_nav_menu_args' );
function wp_nav_menu_args( array $args ) : array {
  if( 'social' === $args[ 'theme_location' ] ) {
    $args[ 'link_after' ] = '</span>' . get_icon( [ 'icon' => 'chain' ] );
  }
  return $args;
}
function get_icon( array $args ) : string {
  return 'use-args-to-return-some-html-to-display-your-icon.png';
}