Align icon and text in a menu item

[kniziol]

Menu configuration

It's not necessary. It's just added to have more menu items than a single, default menu item.

// src/Controller/Admin/DashboardController.php:47

public function configureMenuItems(): iterable
{
    yield MenuItem::linkToDashboard('dashboard', 'fa fa-home');
    yield MenuItem::subMenu('Test', 'fas fa-list')
        ->setSubItems([
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
        ])
    ;
    // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
}

Before (the problem)

The icon in the menu item is currently aligned to the top. It would be so much more visually appealing if both the icon and text were centered together. Just take a look at the example below (in the After section).

After (the solution)

[javiereguiluz]

@kniziol thanks for this ... but we need some changes. Sadly, it's not uncommon to have menu items that span more than 1 line. In those cases, showing the icon centered looks very ugly.

I'd say we should keep the flex-start alignment, but tweak some margin to make it look centered in the 1-line menu item case, which is the most common. Thanks.

[kniziol]

@javiereguiluz Got it. I added a margin-top to the icon so it lines up perfectly with the menu text. Take a look at the result 👇

Multiline - mobile	Multiline - desktop	Single line

I used the following code to generate a menu when testing:

// src/Controller/Admin/DashboardController.php

public function configureMenuItems(): iterable
{
    yield MenuItem::linkToDashboard('Ex excepteur commodo eu aliquip', 'fa fa-home');
    yield MenuItem::subMenu('Magna occaecat reprehenderit officia minim voluptate', 'fas fa-list')
        ->setSubItems([
            MenuItem::linkToDashboard('Consequat sunt esse ad incididunt commodo', 'fa fa-home'),
            MenuItem::linkToDashboard('Cillum laborum laborum sunt est Lorem', 'fa fa-home'),
        ])
    ;
    // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
}

[pfpro]

Hooray for symfony - featuring the marvelous easyadmin - and all the developers out there -
2025 up and coming - chin chin dev-ops 🎉

[javiereguiluz]

Krzysztof, thanks a lot for fixing this bug and for your extra effort during the review.