The current method of adding menu icons to WP nav menus is a bit clunky and easy for clients to break. The client should not have to understand HTML to change the navigation label.
I suggest using the same approach other themes use – use the CSS Classes field to determine what icon to use, and therefore the menu item output.
Current approach:
Navigation label: <i class=”cera-icon text-primary cera-grid”></i> <span>Dashboard</span>
CSS Classes (optional):
Suggested approach:
Navigation label: Dashboard
CSS Classes (optional): cera-icon text-primary cera-grid
Then use a custom menu nav walker (if you don’t already) to read the CSS classes, if they contain the special CSS classes extract them, add the <i> and <span> tags automatically with their appropriate CSS classes and leave the remaining CSS classes to be applied in their default manner.
Alternatively add proper custom advanced menu property fields to allow icon search and select so CSS classes don’t have to be entered manually at all.