MenuBar: make drop down icon replaceable

[stefanuebe]

Describe your motivation

Since 24.5 it is possible to show drop down indicators for menu bar root items with submenus, but unfortunately there seems to be no way to change that icon. This means, that the icon can interfere with the overall theming of the application and thus makes this simple, but helpful feature useless.

Please add a simple way in Flow to allow changing the drop down indicator to some other icon to allow alignment with the project style.

Describe the solution you'd like

Since the drop down icon is defined inside the ::after, I assume a simple "set icon name via Java" will not work here. Therefore the request is, to add two css custom properties to allow easily changing the used font family and icon.

Something like

--menu-bar-drop-down-indicator-content
--menu-bar-drop-down-indicator-font-family

Very technical, but at least an easy way to replace it. And it should not take too much implementation effort I hope :)

Describe alternatives you've considered

Using shadow dom styling to override the default behavior.

[tomivirkki]

As a workaround, you can currently change the icon with the following CSS:

vaadin-menu-bar-button[aria-haspopup]:not([slot='overflow'])::part(suffix)::after {
  content: var(--lumo-icons-plus);
}