Add custom icons to Social Link Block (Front End)

social-link-custom-icons.php

<?php 
function render_social_link_custom_icons( $block_content, $block, $instance ) {
    
    $default_icon = 'M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z';
    
    $document_icon = 'M5 3H13.1667V8.83333H19V21.6667H5V3ZM19 7.66667H14.3333V3L19 7.66667Z';
    $fax_icon = 'M7 4.5V8.25H9.5V4.5H17.1055L18.25 5.64453V8.25H20.75V5.64453C20.75 4.98047 20.4883 4.34375 20.0195 3.875L18.875 2.73047C18.4062 2.26172 17.7695 2 17.1055 2H9.5C8.12109 2 7 3.12109 7 4.5ZM2 8.25V20.75C2 21.4414 2.55859 22 3.25 22H4.5C5.19141 22 5.75 21.4414 5.75 20.75V8.25C5.75 7.55859 5.19141 7 4.5 7H3.25C2.55859 7 2 7.55859 2 8.25ZM20.75 9.5H7V20.75C7 21.4414 7.55859 22 8.25 22H20.75C21.4414 22 22 21.4414 22 20.75V10.75C22 10.0586 21.4414 9.5 20.75 9.5ZM12 12C12.3315 12 12.6495 12.1317 12.8839 12.3661C13.1183 12.6005 13.25 12.9185 13.25 13.25C13.25 13.5815 13.1183 13.8995 12.8839 14.1339C12.6495 14.3683 12.3315 14.5 12 14.5C11.6685 14.5 11.3505 14.3683 11.1161 14.1339C10.8817 13.8995 10.75 13.5815 10.75 13.25C10.75 12.9185 10.8817 12.6005 11.1161 12.3661C11.3505 12.1317 11.6685 12 12 12ZM15.75 13.25C15.75 12.9185 15.8817 12.6005 16.1161 12.3661C16.3505 12.1317 16.6685 12 17 12C17.3315 12 17.6495 12.1317 17.8839 12.3661C18.1183 12.6005 18.25 12.9185 18.25 13.25C18.25 13.5815 18.1183 13.8995 17.8839 14.1339C17.6495 14.3683 17.3315 14.5 17 14.5C16.6685 14.5 16.3505 14.3683 16.1161 14.1339C15.8817 13.8995 15.75 13.5815 15.75 13.25ZM17 17C17.3315 17 17.6495 17.1317 17.8839 17.3661C18.1183 17.6005 18.25 17.9185 18.25 18.25C18.25 18.5815 18.1183 18.8995 17.8839 19.1339C17.6495 19.3683 17.3315 19.5 17 19.5C16.6685 19.5 16.3505 19.3683 16.1161 19.1339C15.8817 18.8995 15.75 18.5815 15.75 18.25C15.75 17.9185 15.8817 17.6005 16.1161 17.3661C16.3505 17.1317 16.6685 17 17 17ZM10.75 18.25C10.75 17.9185 10.8817 17.6005 11.1161 17.3661C11.3505 17.1317 11.6685 17 12 17C12.3315 17 12.6495 17.1317 12.8839 17.3661C13.1183 17.6005 13.25 17.9185 13.25 18.25C13.25 18.5815 13.1183 18.8995 12.8839 19.1339C12.6495 19.3683 12.3315 19.5 12 19.5C11.6685 19.5 11.3505 19.3683 11.1161 19.1339C10.8817 18.8995 10.75 18.5815 10.75 18.25Z';
    $mobile_icon = 'M9.45455 4.54545V5.18182C9.45455 5.53182 9.74091 5.81818 10.0909 5.81818H13.9091C14.2591 5.81818 14.5455 5.53182 14.5455 5.18182V4.54545H15.8182C16.1682 4.54545 16.4545 4.83182 16.4545 5.18182V19.1818C16.4545 19.5318 16.1682 19.8182 15.8182 19.8182H8.18182C7.83182 19.8182 7.54545 19.5318 7.54545 19.1818V5.18182C7.54545 4.83182 7.83182 4.54545 8.18182 4.54545H9.45455ZM8.18182 2C6.42386 2 5 3.42386 5 5.18182V19.1818C5 20.9398 6.42386 22.3636 8.18182 22.3636H15.8182C17.5761 22.3636 19 20.9398 19 19.1818V5.18182C19 3.42386 17.5761 2 15.8182 2H8.18182ZM9.45455 17.9091C9.45455 18.2591 9.74091 18.5455 10.0909 18.5455H13.9091C14.2591 18.5455 14.5455 18.2591 14.5455 17.9091C14.5455 17.5591 14.2591 17.2727 13.9091 17.2727H10.0909C9.74091 17.2727 9.45455 17.5591 9.45455 17.9091Z';
    $phone_icon = 'M2 3.25L7.625 2L10.75 7.625L7.47656 10.2422C8.88672 12.9141 11.082 15.1094 13.7578 16.5234L16.375 13.25L22 16.375L20.75 22H19.5C9.83594 22 2 14.1641 2 4.5V3.25Z';
    $website_icon = 'M15.7529 12C15.7529 12.8672 15.7061 13.7031 15.624 14.5H13.0107L13.5029 12.8281C13.9209 11.4062 12.6006 10.082 11.1748 10.5L8.26074 11.3555C8.27637 10.7188 8.31934 10.0977 8.38184 9.5H15.624C15.71 10.2969 15.7529 11.1328 15.7529 12ZM2.7998 12.9609C2.52246 13.043 2.28809 13.1758 2.09277 13.3477C2.03418 12.9062 2.00293 12.457 2.00293 12C2.00293 11.1367 2.1123 10.3008 2.31934 9.5H7.12793C7.05371 10.2188 7.01465 10.9609 7.00684 11.7266L2.7998 12.9609ZM11.042 21.2031L12.6436 15.75H15.4521C15.2139 17.1719 14.8467 18.4297 14.3975 19.4453C13.9873 20.3672 13.5303 21.0352 13.0889 21.457C12.6514 21.875 12.2881 22 12.0029 22C11.7217 22 11.3662 21.8789 10.9365 21.4766C10.9756 21.3906 11.0107 21.2969 11.042 21.1992V21.2031ZM16.8779 9.5H21.6865C21.8936 10.3008 22.0029 11.1367 22.0029 12C22.0029 12.8633 21.8936 13.6992 21.6865 14.5H16.8779C16.96 13.6953 17.0029 12.8594 17.0029 12C17.0029 11.1406 16.96 10.3047 16.8779 9.5ZM21.2764 8.25H16.7178C16.3271 5.75391 15.5537 3.66406 14.5576 2.32812C17.6162 3.13672 20.1045 5.35547 21.2725 8.25H21.2764ZM8.55371 8.25C8.79199 6.82812 9.15918 5.57031 9.6084 4.55078C10.0186 3.62891 10.4756 2.96094 10.917 2.53906C11.3545 2.125 11.7178 2 12.0029 2C12.2881 2 12.6514 2.125 13.0889 2.53906C13.5303 2.96094 13.9873 3.62891 14.3975 4.55078C14.8506 5.56641 15.2139 6.82422 15.4521 8.25H8.55371ZM7.28809 8.25H2.72949C3.90137 5.35547 6.38574 3.13672 9.44824 2.32812C8.45215 3.66406 7.67871 5.75391 7.28809 8.25ZM21.2764 15.75C20.1045 18.6445 17.6201 20.8633 14.5615 21.6719C15.5576 20.3359 16.3271 18.2461 16.7217 15.75H21.2764ZM3.52637 14.0508L11.5264 11.6992C11.999 11.5586 12.4404 12 12.3037 12.4766L9.95215 20.4766C9.79199 21.0195 9.0459 21.0859 8.79199 20.5781L7.6709 18.3398C7.64355 18.2891 7.6123 18.2383 7.57324 18.1953L4.13574 21.6328C3.64746 22.1211 2.85449 22.1211 2.36621 21.6328C1.87793 21.1445 1.87793 20.3516 2.36621 19.8633L5.80371 16.4258C5.76074 16.3867 5.71387 16.3516 5.65918 16.3281L3.4248 15.2109C2.91699 14.957 2.9834 14.2109 3.52637 14.0508Z';
    
    $custom_icon = false;
    
    if( $block['blockName'] === 'core/social-link' ) {
        if( $block['attrs']['service'] === 'document' ) {
            $custom_icon = $document_icon;
        }
        if( $block['attrs']['service'] === 'fax' ) {
            $custom_icon = $fax_icon;
        }
        if( $block['attrs']['service'] === 'mobile' ) {
            $custom_icon = $mobile_icon;
        }
        if( $block['attrs']['service'] === 'phone' ) {
            $custom_icon = $phone_icon;
        }
        if( $block['attrs']['service'] === 'website' ) {
            $custom_icon = $website_icon;
        }
        if( $custom_icon ) {
            $block_content_with_custom_icon = str_replace(
                $default_icon,
                $custom_icon,
                $block_content
            );
            return $block_content_with_custom_icon;
        } else {
            return $block_content;
        }
    } else {
        return $block_content;
    }
}
add_filter( 'render_block', 'render_social_link_custom_icons', 10, 3 );