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

You need to use the Inspect Element in Chrome to see the correct characters. Right-click an icon and select Inspect Element.