Change colors

To change the background colors of the icons used in a menu, you’ll have to use some css classes.

Here are the CSS classes to use:

To add one of those CSS classes to use a different color, you’ll have to go to Dashboard > Appearance > menus and select the right menu. Then, you can add the CSS class to the CSS Classes field. In case this field is not displayed, you’ll have to enable it by checking the “CSS Classes” box in the Screen Options.

Each CSS class will have a specific color. You can change their attributed colors in the Customizer by visiting Appearance > Customize > BuddyPress > Members Directory > Style. You will find 6 color pickers among which 5 will affect these classes:
Love Buttons Color -> primary
Message Buttons Color -> info
Success Buttons Color -> success
Delete Buttons Color -> danger
Miscellaneous Buttons Color -> (default)

Please note that these colors changes will impact other components of your theme, like the BuddyPress action buttons in your members directory page.

Change icons

You can also change the icons by choosing one of the following if necessary: https://fontawesome.com/v4.7.0/icons/
For example, just replace fa fa-lock by fa fa-bell to display a bell icon instead of the lock icon.

Here is some exemple of the HTML markups to can use
<span class="icon-wrapper"><i class="fa fa-lock" aria-hidden="true"></i><span class="h5 d-block">Menu Item</span></span>
<span class="icon-wrapper"><i class="fa fa-bell" aria-hidden="true"></i><span class="h5 d-block">Menu Item</span></span>

For quick demo, please give a look to the following video tutorial: https://youtu.be/IUDVjGCPo4I

Other icons are available regarding the theme you use. We wrote an article about it:

What icons can I use for my menu and on the whole site