<div class="mobile-menu">
                <ul id="mobile-menu" class="menu">
                    <li class="dropdown">
                        <a href="#">Home</a>
                        <i class="sub-menu-toggle fa fa-angle-down"></i>
                        <ul class="sub-menu">
                            <li><a href="index.html">Home Production</a></li>
                            <li><a href="index-film-making.html">Home Film Making</a></li>
                            <li><a href="index-studio.html">Home Studio</a></li>
                            <li class="active"><a href="index-director.html">Home Director</a></li>
                            <li><a href="index-agency.html">Home Agency</a></li>
                            <li><a href="index-blogger.html">Home Blogger</a></li>
                            <li><a href="index-showcase.html">Home Showcase</a></li>
                        </ul>
                    </li>

I have been able to insert li class if there is a submenu but how do i insert the ‘i’ element if the menu has submenus ??

I used the following code in my functions.php to generate the li class

function menu_set_dropdown( $sorted_menu_items, $args ) {
    $last_top = 0;
    foreach ( $sorted_menu_items as $key => $obj ) {
        // it is a top lv item?
        if ( 0 == $obj->menu_item_parent ) {
            // set the key of the parent
            $last_top = $key;
        } else {
            $sorted_menu_items[$last_top]->classes['dropdown '] = 'dropdown ';
        }
    }
    return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );