Snippets

Snippet: Override Theme Icon HTML with custom SVG

  • Updated:

The Total theme includes various built-in icons that are used in the general theme design but can also be displayed via elements. This snippet shows you how you can modify any of the included theme icons with a custom SVG icon.

/**
 * Override a theme icon with a custom SVG.
 *
 * @link https://total.wpexplorer.com/docs/snippets/override-theme-icon-html-with-custom-svg/
 */
add_filter( 'wpex_theme_icon_html', function( $html, $icon, $extra_class  ) {
    switch ( $icon ) {
        // In this example you will override the icon named "ICON_NAME-EXAMPLE_1" with your custom HTML.
        case 'ICON_NAME-EXAMPLE_1':
            return '<div class="wpex-svg-icon ' . $extra_class . '">YOUR_CUSTOM_SVG_CODE</div>';
            break;
        // In this example you will override the icon named "ICON_NAME-EXAMPLE_1" with your custom svg located
        // in your child theme under assets/svgs/YOUR_CUSTOM_SVG_NAME.svg
        case 'ICON_NAME-EXAMPLE_2':
            return wpex_get_svg( 'YOUR_CUSTOM_SVG_NAME.svg' );
            break;
    }
    return $icon_html;
}, 10, 3 );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top