🇫🇷France @mogtofu33

First check the template generated to be sure there is no double quoted string.

Then your SVG icons must be compatible with usage of fill="currentColor", see documentation for color inheritance: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color.

Was fixed in previous beta with 📌 Incorrect composer dependency for 1.1.x Active

I have a suggestion to make navigation menu compatible with ui_icons_menu → , which give the opportunity to add an icon to the menu, and would probably be compatible with any other module giving the opportunity to add an icon to the menu.

In toolbar-button.twig, we could check if the text is not only text but something more, like for ui_icons_menu the text include the icon as a FormattableMarkup. In this case, checking if text is a mapping would allow to ignore the non icon (2 letters) and let a custom icon be picked. The icon choice will even be part of the Navigation Icon pack! So you can even provide more icons not yet used in the current entries!

So would be line 27:
{% if icon and text is not mapping %}

You can quickly test by installing ui_icons, enable ui_icons_menu, create a menu entry and pick an icon.

Here is the result example, there is just a minor padding to fix that could be added in the ui_icons_menu:

Looking great!

The Icon API ignore folders as a choice to allow moving icons inside and organizing as will without impact.

Just added a small fix for the announcement icon upside down.

And as well I forgot the Icon twig function do not do anything to allow 'last' rendering from the icon RenderElement. So as you found you need to render.

The Icon API → provide a render element and a Twig function based on the icon id, so the form element can simply return the icon id (pack_id:icon_id).

For the available icons, need to create an icon pack discovery yaml (see doc → ). One file can reference all available icons through different paths.

For some starting point you can check ui_icons FormElement and derived picker FormElement.
This form element is a bit complex because of the feature to be able to set custom settings to the icon (size, color, ...) perhaps you don't need that.

Fix wrong title and double text.

Thanks @finnsky, added the toolbar message icon as well.

But because the naming need to match the icon, had to rename radioactive to error and copy help as status.
I let you decide how to manage that.

I didn't include a default icon for message in the twig. As I am not sure of the status for this feature, I just started simple.

Let me know if you need something else.

Hello @finnsky,

I updated the announcement and title buttons. But for the Top Bar icons, there is a vertical alignment to fix.

Probably not possible to replace the throbber icon override in toolbar-button. Not until the core throbber is an icon.

I am struggling to replace the toolbar-message icons (radioactive, help, warning) as I don't really see how to activate the messages, if you can point me I could probably do that.

On the branch I forgot to merge... :D

Following core API fix 🐛 IconFinder does not generate url with base_url Active , I changed a bit to strip the starting slash as it make more sense.

Hi @finnsky, re-rolled!

The sidebar icons looks good, I have to check for other icons around navigation code, if you can have a look, thanks.

Current jobs fail is not related to Icon.

mogtofu33 → changed the visibility of the branch 3483209-navigation-icon-api to hidden.

@goz, I am still working on it to have a reliable kernel test for different base_path() values.

So base_path() make more sense, mentioning base_url was confusing.

mogtofu33 → made their first commit to this issue’s fork.

I was too fast in merging and seems it needs more information.

The merge add a beginning slash (/) this seems to be a solution for a specific use case. Icons sources can be relative to the module with the definition (*.icons.yml) or relative to Drupal root, for example /libraries/...

There is no base_url anymore in Drupal 8+, so I guess the problem could be in your Webserver configuration to allow this sub folder.

Try to use the definition of icons relative to drupal root libraries folder ( ie: sources start with /libraries).

You should as well check on the Apache/Nginx configuration you are using and optionnaly if you have any custom specific code in your settings*.php or sites.php.

Thanks for the MR, I created a follow up issue with the core Icon API for 1.1.x 🐛 IconFinder does not generate url with base_url Active .

mogtofu33 → created an issue.

Thanks for the issue and proposition, I used intanceof check instead of object.

On 1.1.X and backported on 1.0.x.

Hi @nod_ and @pdureau,

I fully agree to the responsibilities listed for definition of maintainers and subsystem maintainer responsibilities.

Hope I can help as much as possible on the new theme/sdc and Icon API to be successful.

g4mbini → credited mogtofu33 → .

mogtofu33 → made their first commit to this issue’s fork.

mogtofu33 → made their first commit to this issue’s fork.

Seems like just removing the specific light classes is enough for the dark theme support!

Small update, it can be achieved now with ui_icons_media using the core CKeditor media plugin.

• With ui_icons_media enable, create an media type icon
• Create the limited number of icons you need
• Media Icon fields > Manage display > Media library, replace thumbnail by icon with settings pack size to 50
• Text formats and editors > enable Media, limit to type Icon

Contrib modules around media embed can help customize.

Can you be more precise on how to reproduce, this is related to link with icon as a field in a media?

mogtofu33 → created an issue.

mogtofu33 → changed the visibility of the branch 3489673-regression-with-uiiconsmenu to hidden.

Because this is now in core, we can close.

Pushed but I cannot create the MR.

Pushed but I cannot create the MR.

mogtofu33 → created an issue.

(Try to) Fix code language YAML overridden by language PHP.

Remove SVG sprite url reference as it's not currently available.

Add properties and parameters for icon element and twig function.

Faster on both sides, for discovery and a better in front at least after first download...
SVG Sprite could be use with CDN but not public one because of CORS, so it's an edge case optimization.

As it's just a suggestion I understand we could keep to SVG. My mind is not fully set on that.

mogtofu33 → created an issue.

mogtofu33 → created an issue.

mogtofu33 → created an issue.

Fixed on 1.1.x, backported on 1.0.x.

mogtofu33 → created an issue.

Had an issue with a double icon_display, fixed in IconFieldHelpers::validateSettings(), fixed on 1.1.x, backported 1.0.x.

But didn't had double pack settings.

Please try to export config, manually edit to remove what's not under icon_settings and import it back.

Here is my test on clean Drupal 11.1 + UI icons 1.1.x-dev.

• Enable UI Icons media, Icons bootstrap example with this config and create Icon media
• Set media icon field display settings for the icon packs
• Add field Media icons to content
• Set content display with layout builder

With that, config core.entity_view_display.media.icon.default is valid as below.

content:
  field_linkit_attributes:
    type: icon_linkit_formatter
    label: hidden
    settings:
      trim_length: 80
      url_only: false
      url_plain: false
      rel: '0'
      target: _blank
      linkit_profile: default
      icon_settings:
        bootstrap:
          color: '#6200ee'
          size: 32
          alt: ''
        bootstrap_svg:
          color: '#f66151'
          size: 32
        bootstrap_path:
          color: '#000000'
          size: 32
          alt: ''
        bootstrap_name:
          color: '#000000'
          size: 32
      icon_display: after
    third_party_settings: {  }
    weight: 0
    region: content

Found the doc! Fixed on 1.0.x and 1.1.x

Done for most, only Protocol and Material missing, issues ongoing.

Added to module page and Drupal Icon API doc → .

mogtofu33 → created an issue.

As for now this field is not planned for UI icons, if anyone want to create a dedicated modules, would review.

There is not token integration yet but you can achieve this with Ui Icons field.

• Add Field type icon to the vocabulary
• Add icon field to the taxonomy display
• On the content field > Manage display > Taxonomy field set to "Rendered entity", pick the previously set taxonomy display

Thanks for the report, fixed in 1.0.x and 1.1.x documentation, added to project page.

Thanks for the report.

Fixed on 1.1.x and backported to 1.0.x.

Thanks for the report, changed for an 'access content' permission.

Fixed on 1.1.x and backported to 1.0.x.

Fixed on 1.1.x, backported to 1.0.x.

There is already a lazy loading for Icon preview (Form element) and library.

For the front part if you need compatibility with Blazy you only need to have a template for your icons including the proper markup, see Icon API documentation → .

So I guess it's already compatible, marked as fixed.

Can only reproduce when a pack use extractor: font and do not have dependency to ui_icons_font.
Fixed in the examples for Bootstrap and Material.

Will mark this issue fixed, feel free to open with step to reproduce if the problem still occur.

Fix YAML examples, a specific section "YAML icon pack declaration documentation" explain in details most keys.

Thanks for the proposal, done and created 1.1.x, 1.1.0-beta1 to come soon.

Thanks for the report, fixed on 1.0.x-dev.

mogtofu33 → made their first commit to this issue’s fork.

mogtofu33 → made their first commit to this issue’s fork.

mogtofu33 → made their first commit to this issue’s fork.

Hello all, here is an highlight proposition:

A new API has been added to Drupal, empowering you to seamlessly integrate custom or third-party icon packs!
This powerful and flexible API allows modules and themes to define icon packs using the YAML plugin discovery system (EXTENSION_NAME.icons.yml).
By extracting the icon list from each pack, the API exposes them through the versatile icon render element and the convenient icon() Twig function.

grimreaper → credited mogtofu33 → .