Dynamic login/logout item in menu

I would like to add a dynamic login/logout item to the main menu. Users that are logged-out should see "login", logged-in users should see "logout". The logout item has a submenu. This can easily be done with a standard WP filter:

function add_login_logout_register_menu( $items, $args ) {
  $login = home_url( '/login/' );
  $logout = home_url( '/login/' );
  if ( $args->theme_location == 68 ) {
    return $items;
  }
  if ( is_user_logged_in() ) {
    $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="' . $logout . '">' . __( 'Logout' ) . '</a>
    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://doriskirch.de/meine-kurse/">Meine Kurse</a></li>
    </ul></li>';
  }
  else {
    $items .= '<li><a href="' . $login . '">' . __( 'Login' ) . '</a></li>';
  }
  return $items;
} 
add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 199, 2 );

The only problem is that I don't see the dropdown arrow that opens the subitem.

The standard menu uses a SVG like so:

<span role="presentation" class="dropdown-menu-toggle">
<span class="gp-icon icon-arrow">
<svg viewBox="0 0 330 512" aria-hidden="true" role="img" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="1em" height="1em">
<path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087..."
</svg>
</span>
</span>

Can this be done automatically? Or would I have to put this into the filter? I guess, I would need a different code for the mobile menu.

I understand, if this is beyond the scope of a support forum. I could live with two top level items, if the submenu would be too messy.