Trying to add a custom social icon to a Twenty Twenty-One child theme

The linked answer was written in 2019, yet the new field guide (“Adding icons in Twenty Twenty”) was written about a year later (2020), so you should just use that new field guide, and in response to the main issue:

I am trying to add an icon to the Twenty Twenty-One social icons, but
having trouble registering it.

You’re getting the preg_match(): Unknown modifier 'v' error because of the unescaped / (slash) as in rhs-1.test/events/list/ which you supplied via the twenty_twenty_one_social_icons_map filter.

And unfortunately, there’s no way to escape it correctly because the function which applies the filter calls preg_quote(), so back-slashes (\) will be escaped. Also, just so you know, the / is not escaped because preg_quote() is called without the second parameter specified. (see source on Trac)

However, the values in the array ($icons['rhs-calendar']) should actually be just domains, subdomains and/or IPs like example.com and foo.example2.com, e.g. array( 'example.com', '127.0.0.1' ). And if you added a domain/IP there, then all URLs with that very domain/IP would use your custom icon, so there’s no need to specify a URL path like the rhs-1.test/events/list/.

---

I also want to use this icon in the Gutenberg “Social Icons” block

As of writing, the core Social Icons block does not provide any PHP or JS filters that we could use to easily add custom icons to the default list (and note that the Social Icons block is a dynamic block and it also has its own editor script), but you could alternatively create a block that would add your custom icon to the editor. However, you would need to ask in another question for more details on that.

Or another option is, add your custom icon using the Link block via the Social Icons block, then set a custom CSS class for the icon, and just style the button accordingly:

1. Save your icon’s SVG as assets/images/rhs-calendar.svg in your child theme folder (e.g. at wp-content/themes/twentytwentyone-child).

2. Add this to your editor style file (assets/css/style-editor.css):

   .wp-block-social-link.rhs-calendar-icon > button {
       background-image: url(../images/rhs-calendar.svg);
       background-repeat: no-repeat;
       background-position: center;
       background-size: 24px;
       width: 36px;
       height: 36px;
   }
   
   .wp-block-social-link.rhs-calendar-icon > button > svg {
       display: none;
   }
   

3. Add this to your main style.css file, or wherever you want, just ensure the styles are applied on the front-end side of the site:

   .wp-social-link.rhs-calendar-icon > a {
       background-image: url(assets/images/rhs-calendar.svg);
       background-repeat: no-repeat;
       background-position: center;
       background-size: 24px;
       width: 36px;
       height: 36px;
   }
   
   .wp-social-link.rhs-calendar-icon > a > svg {
       display: none;
   }
   

4. Add the icon using the Link block.

   

5. Set the custom icon class via the “Additional CSS class(es)” field.

   

Additional Notes

1. There’s an unwanted </g> tag in your SVG code.

2. In my SVG file (rhs-calendar.svg), I removed the sodipodi:nodetypes="ssccsscsssssssscssccssssc"..