Make compatible with core Navigation module D11.2.0

Created on 23 June 2025, about 1 month 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