Contents of my Twentyseventeen child theme.

functions.php

<?php
/**
 * The functions file for Child of Twentyseventeen theme.
 *
 * @package WordPress
 * @subpackage child_of_twentyseventeen
 * @since 1.0
 * @version 1.0
 */

/**
 * Since 1.0.
 */
function my_theme_enqueue_styles() {

	$parent_style = 'parent-twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-twentyseventeen-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

/**
 * SVG icons functions and filters.
 */
include_once( get_stylesheet_directory() . '/inc/social-menu-links.php' );

social-menu-links.php

<?php
/**
 * Substitutes SVG icon menu code from twentyseventeen
 * Since 1.0.0
 *
 * @package WordPress
 */

/**
 * Remove the filter from twentyseventeen_nav_menu_social_icons.
 *
 * @since  1.0.0
 * @return void
 */
function remove_filter_twentyseventeen_nav_menu_social_icons() {
	remove_filter( 'walker_nav_menu_start_el', 'twentyseventeen_nav_menu_social_icons', 10, 4 );
}
add_action( 'after_setup_theme' , 'remove_filter_twentyseventeen_nav_menu_social_icons' );

/**
 * Display SVG icons in social links menu.
 *
 * @param  string  $item_output The menu item output.
 * @param  WP_Post $item        Menu item object.
 * @param  int     $depth       Depth of the menu.
 * @param  array   $args        wp_nav_menu() arguments.
 * @return string  $item_output The menu item output with social icon.
 */
function twentyseventeen_child_nav_menu_social_icons( string $item_output, $item, $depth, $args ) {
	// Get supported social icons.
	$social_icons = twentyseventeen_social_links_icons();
	// See if a menu has the name Social Media Menu.
	$menu_object = wp_get_nav_menu_object( 'social-links-menu' );
	// Make sure these don't match to start with.
	$social_menu_id = -1;
	$cur_menu = 0;
	if ( $menu_object ) {
		$social_menu_id = $menu_object->term_id;
		if ( is_object( $args->menu ) ) {
			$cur_obj = $args->menu;
			$cur_menu = $cur_obj->term_id;
		} else {
			$cur_menu = $args->menu;
		}
	}
	// Change SVG icon inside social links menu if there is supported URL.
	if ( 'social' === $args->theme_location ) {
		foreach ( $social_icons as $attr => $value ) {
			if ( false !== strpos( $item_output, $attr ) ) {
				$item_output = str_replace( $args->link_after, '</span>' . twentyseventeen_get_svg( array( 'icon' => esc_attr( $value ) ) ), $item_output );
			}
		}
	} else {
		// Check if the social-menu-icon is being used elsewhere and change SVG icon inside social links menu if there is supported URL.
		if ( $social_menu_id === $cur_menu ) {
			$item_output = str_replace( '">', '"><span class="screen-reader-text">' , $item_output );
			$item_output = str_replace( '</a>', '</span></a>' , $item_output );
			foreach ( $social_icons as $attr => $value ) {
				if ( false !== strpos( $item_output, $attr ) ) {
					$item_output = str_replace( '</span>', '</span>' . twentyseventeen_get_svg( array( 'icon' => esc_attr( $value ) ) ), $item_output );
				}
			}
		}
	}
	return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'twentyseventeen_child_nav_menu_social_icons', 10, 4 );

style.css

/*
Theme Name: Child of Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: child-twentyseventeen
Template: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.main-navigation .menu-social-links-menu-container .icon {
  display: inline-block;
  font-size: 36px;
}

.widget-area .menu-social-links-menu-container ul li {
  display: inline-block;
  font-size: 1rem;
  border: none;
  padding: 0;
}

.widget-area .menu-social-links-menu-container ul li a {
  background-color: #767676;
  border-radius: 40px;
  color: #fff;
  display: inline-block;
  height: 40px;
  margin: 0 1em 0.5em 0;
  text-align: center;
  width: 40px;
}

.widget-area .menu-social-links-menu-container ul li a:focus,
.widget-area .menu-social-links-menu-container ul li a:hover {
  background-color: #333;
  color: #fff;
  border: none;
  box-shadow: none;
}

.widget_search {
  clear: both;
}

.widget-area .social-navigation {
  width: 100%;
}