Add icons to Jetpack Social Menu

I have been looking around the net quite a lot to find a solution on how to add icons to the "social menu" in wordpress:

At first I thought this menu was a feature of the theme I am using, Independent Publisher 2. I only found a Github repo for the version 1 theme - tried all the hacks there - and finally found out that version 2 was bought by WordPress.com and customized. So all the hacks available for version 1 did not even work. Bummer.

I really wanted to finally have icons for Mastodon, Hackster, Keybase or the RSS feed - so I looked into the file system - and look and behold, I found the path which actually does all the "heavy lifting":

wp-content/plugins/jetpack/modules/theme-tools/social-menu

Warning: Thanks to dear Stacy for the update: "As of Jetpack 13.7, these files are now in:"

wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-classic-theme-helper/src/social-menu

Turns out, this menu is actually generated as part of the WordPress Jetpack and its Social Menu part.

To add to its library is very simple (even though not documented...):

• Look up SVG icons, maybe from a free website like https://simpleicons.org/
• Download the svg file and open in notepad or other editor, it will look like this:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-[...]2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>

• You will need to change the "svg" element to symbol", set an name/id, remove role item and xmlns as well as the title. It will then look like this:

<symbol id="icon-mastodon" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-[...]2 1.81 1.012 3.12z"/></symbol>

• Add this new object into the social-menu.svg before the closing </defs></svg> tag and save the file
• Open the icon-functions.php and add some entries to the $social_links_icons array. The binding is basically URL Path/Matching => Icon ID in the social-menu.svg. so to add e.g. the Keybase.io, Mastodon (on chaos.social) and Hackster.io icons I added:

          'keybase.io'       => 'keybase',
            'chaos.social'       => 'mastodon',
            'hackster.io'       => 'hackster',
        );

• Save and close the file, if you now add a new custom element/external link to your social bar e.g. containing keybase.io in the URL, it will show up as the newly added keybase icon.