Make compatible with core Navigation module D11.2.0

Created on 23 June 2025, 10 days ago

Problem/Motivation

The icons do not work in D11.2.0 in the Navigation sidebar and top bar

Proposed resolution

- Create a my_module.icons.yml file to leverage Core icon system, something like this:

my_module:
  enabled: true
  label: "My Module icons"
  description: "Icons fur using in the My Module module."
  version: 11.x
  extractor: svg
  config:
    sources:
      - assets/*.svg
  settings:
    size:
      title: "Size"
      description: "Set a size for this icon."
      type: "integer"
      default: 20
    class:
      title: "Class"
      description: "Set a class for this icon."
      type: "string"
      default: ""
  template: >
    <svg
      {{ attributes
          .setAttribute('viewBox', attributes.viewBox|default('0 0 24 24'))
          .setAttribute('class', class)
          .setAttribute('width', size|default('20'))
          .setAttribute('height', size|default('20'))
          .setAttribute('aria-hidden', 'true')
      }}
    >
      {{ content }}
    </svg>

- I am not sure exactly where you build the items for in the navigation, this is a general example how to create a toolbar item with icon in for example hook_preprocess_navigation_menu:

    $variables['items']['entity.webform.collection'] = [
      'is_expanded' => FALSE,
      'is_collapsed' => FALSE,
      'in_active_trail' => FALSE,
      'title' => t('Webforms'),
      'url' => Url::fromRoute('entity.webform.collection'),
      'below' => [],
      'class' => 'navigation-content',
      'icon' => [
        'pack_id' => 'my_module',
        'icon_id' => 'form',
        'settings' => [
          'class' => 'toolbar-button__icon',
          'size' => 20,
        ],
      ],
    ];

This creates a link in the navigation left sidebar in D11.2.0 to webforms with a custom form.svg icon inside my_module/assets/form.svg assuming you have a my_module.icons.yml file like provided above.
At this point I'm not sure of the correct way for styling items in the top bar, as said: this is for the left sidebar of the core Navigation module.

📌 Task
Status

Active

Version

2.1

Component

Code

Created by

🇧🇪Belgium flyke

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024