Vaadin Barre de menu, espace entre la légende et l'icône d'un article

Question

J'ai une barre de menu avec quelques éléments. Chaque élément a une légende et une icône. Le problème est que la légende et l'icône sont très proches les unes des autres. Le voici:

Comment est-ce que je peux placer un peu d'espace entre la légende et l'icône?

Ceci est mon code simple:

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) 

et css:

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

Answer 1

Vous devez ajouter un peu plus CSS pour votre Icon-élément:

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

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

Si vous utilisez SASS, vous devrez également recompiler le thème et peut-être recharger Browser-Cache pour que les modifications prennent effet.

Screenshot of my local working example