To add custom HTML to the tab title you can create an array from your icons and change nvaigation.php in the woocommerce template folder like below:
$icons = [
'dashboard' => '<i class="icon-dashboard"></i>',
'orders' => '<i class="icon-orders"></i>',
'edit-account' => '<i class="icon-edit-account"></i>',
'customer-logout' => '<i class="icon-customer-logout"></i>',
'downloads' => '<i class="icon-downloads"></i>',
'edit-address' => '<i class="icon-edit-address"></i>'
]; and in the foreach of rendering tabs echo with $endpoint like below:
<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
<a class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>" href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>">
<?php echo $icons[$endpoint] ?>
<?php echo esc_html( $label ); ?>
</a>
<?php endforeach; ?>
with this method, you can add any content to your tabs
it seems like you will modify the WooCommerce template directly in core…woocommerce/templates/myaccount/navigation.php
When you have to modify a WC template, the correct way to do it is to duplicate the template’s path relative to the woocommerce/templates folder into your theme/plugin’s woocommerce folder.
In child theme
For example in our case, you’d have to paste the template into:child-theme/woocommerce/myaccount/navigation.php.
