I'd like to be able show mobile users if a menu item is an external link.

Easy to do for Mega Menu, but I can't work out how to do it for the Off Canvas menu.

I gave main menu external link items the class name of "mmexternal", and drop down external link items the class name of "dropdownexternal"

I'm using CSS to give the fa-external-link-alt icon a contrasting colour to the text by giving the menu item a class name in the menu builder and using the below in my custom.css file

.sp-megamenu-parent > li.mmexternal > a {color:#00713d!important; }
.sp-megamenu-parent > li.mmexternal .fas.fa-external-link-alt {color:#cfab79!important;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.dropdownexternal > a {color:#00713d!important; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.dropdownexternal .fas.fa-external-link-alt {color:#cfab79!important;}

I see when I use Inspect in Chrome, that the Off Canvas meue items have the class names I gave them.

Can I add to my custom.css file to display the external link icon on Off Canvas menu items that I have given a class name?