Строка меню Vaadin, пространство между заголовком и значком элемента

Question

У меня есть строка меню с некоторыми пунктами. Каждый элемент имеет подпись и значок. Проблема в том, что заголовок и значок очень близки друг к другу. Вот:

Как я могу установить пространство между заголовком и значком?

Это мой простой код:

MenuBar menuBar = new MenuBar();
menuBar.setSizeFull();
menuBar.addStyleName(CSS.commom-menu-bar);
menuBar.addItem("import", VaadinIcons.DOCTOR,(selectedItem) ->  importDocs());
HorizontalLayout menuBarLayout = new HorizontalLayout(menuBar);
menuBarLayout.setWidth("100%");
setContent(menuBarLayout)

и CSS:

.v-menubar-common-menu-bar{
direction: rtl;
text-align: right !important;
}

Answer 1

Вы должны добавить немного больше CSS для вашего Icon-элемента:

.v-menubar-commom-menu-bar{
    direction: rtl;
    text-align: right !important;
}

.v-menubar-commom-menu-bar .v-icon
{
    padding-left: 10px;     
}

Если вы используете SASS, вам также придется перекомпилировать тему и, возможно, перезагрузить Browser-Cache, чтобы изменения вступили в силу.

Скриншот моего локального рабочего примера