Skip to main content
The bundle has optional support for Symfony UX Icons. When installed, it uses ux_icon() to render SVG icons in menu items. When not installed, the template falls back to a <span data-icon="..."> element you can style with your own icon system.

​
Installing UX Icons

composer require symfony/ux-icons
No further bundle registration is needed — the bundle auto-detects whether UX Icons is available.

​
Setting an icon on a menu item

Set the Icon field on any menu item in the dashboard using the icon library prefix format: 
bootstrap-icons:house
heroicons:home
fa6-solid:star
The part before : is the icon library identifier. The part after : is the icon name within that library.

​
Configuring the icon library prefix map

Different UX Icons adapters expect different short prefixes (e.g. Bootstrap Icons expects bi:house, not bootstrap-icons:house). Configure the mapping in your bundle YAML:
config/packages/nowo_dashboard_menu.yaml
nowo_dashboard_menu:
    icon_library_prefix_map:
        bootstrap-icons: bi
With this config, the bundle converts bootstrap-icons:house → bi:house before calling ux_icon('bi:house'). You can add as many entries as you need: 
nowo_dashboard_menu:
    icon_library_prefix_map:
        bootstrap-icons: bi
        heroicons: heroicon
        fa6-solid: fa6-solid
Config keys are normalised internally (hyphens become underscores), so bootstrap-icons and bootstrap_icons both work as YAML keys.

​
Per-menu UX Icons toggle

Each menu in the database has a use_ux_icons flag. Set it via the configuration panel (gear icon) in the dashboard. When disabled for a specific menu, the template outputs <span data-icon="..."> even if UX Icons is installed globally.

​
Fallback when UX Icons is not installed

When symfony/ux-icons is not installed, the menu template renders icons as: 
<span data-icon="bootstrap-icons:house"></span>
You can target this with CSS or a custom JavaScript icon loader: 
[data-icon] {
    display: inline-block;
    width: 1em;
    height: 1em;
    /* load via background-image, icon font, etc. */
}

​
Icon size

The rendered icon size is controlled by the dashboard.icon_size config option:
config/packages/nowo_dashboard_menu.yaml
nowo_dashboard_menu:
    dashboard:
        icon_size: 1em   # default; also accepts px values e.g. 16px
This value is applied as the width and height on SVG icons rendered by UX Icons, and as font-size on legacy span icons.

​
Icon selector integration

If you use nowo-tech/icon-selector-bundle, you can connect it to the item form’s icon field by providing the selector script URL:
config/packages/nowo_dashboard_menu.yaml
nowo_dashboard_menu:
    dashboard:
        icon_selector_script_url: 'https://your-cdn.example.com/icon-selector.js'
When set, the item form in the dashboard renders an icon picker widget powered by that script.