So first go to Appearance > Menus and click 'Screen options' at the top. Within that tick 'CSS Classes'
Now, when you edit a menu item you'll see this extra field.
So let's say you want to change the 'Downloads' menu icon to be something else. The existing CSS Classes for this are:
right secondary download
Change them to:
right secondary custom-icon
Once added, Go to Appearance > Customize > Additional CSS and add the following:
.cg-primary-menu-below-wrapper .menu > li.custom-icon a:before {
font-family: 'Ionicons';
position: absolute;
left: 20px;
font-weight: 300;
content: "\f39e";
}
What's in the 'content' rule is the actual icon - in this example an Android user icon.
You can choose any icon you like from https://ionicons.com/v2/cheatsheet.html
You need to use the Inspect Element in Chrome to see the correct characters. Right-click an icon and select Inspect Element.