Toolbar icon is not displaying with gin theme

Created on 12 June 2025, about 2 months ago

Problem/Motivation

When using gin theme, the dashboard icon does not display in toolbar.

Steps to reproduce

Enable dashboard module and Gin theme for administration.
Go to /admin

Proposed resolution

Use the way gin deal with icons (css mask) instead of background image.
Benefits of this is to be able to change icon color changing background color.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇫🇷France goz

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

Merge Requests

Comments & Activities

  • Issue created by @goz
  • Merge request !62Resolve #3529744 "Toolbar icon is" → (Open) created by goz
  • 🇫🇷France goz

    In the MR, i remove dashboard-active.svg part since mask automatically change color on active links.

  • 🇫🇷France goz

    After MR, active link in gin toolbar :

    And not active :

    And finally default toolbar :

  • Pipeline finished with Success
    about 2 months ago
    Total: 309s
    #520403
  • 🇮🇳India vinodhini.e chennai

    Hi goz,
    I have enabled the Gin and Dashboard modules and verified the changes.

    After adding !important to the CSS in dashboard.icon.css, only then were the updates applied. Please see the attached screenshot for reference.

    Dashbaord.icon.css - file
    .toolbar .toolbar-bar .toolbar-icon .toolbar-icon-system-dashboard::before,
    .toolbar-tray .toolbar-icon-system-dashboard::before {
    --icon: url("../icons/dashboard.svg");
    mask-image: var(--icon) !important;
    mask-size: contain;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    }

    Thank you!

  • 🇮🇳India divya.sejekan

    I have enabled the Gin and Dashboard , but not able to reproduce this issue . After just enabling the module (i have not added any dashboard) i can see a square svg in my toolbar , unable to click. If i add dashboard , can see svg and menu link , this is happening without patch
    After applying patch too its same.
    Correct me if I am Wrong. Im using Drupal V-11.1.8 , Dashboard - V2.0.0
    Steps Followed :
    1. Install drupal 11 , Enabled Gin Admin theme
    2. Install Dashboard module
    3. Check sidebar tool - no dashboard added - image
    4. Check Sidebar - after adding dashboard - image
    5. Apply patch - no changes

  • 🇫🇷France quimic Paris

    With:

    • Drupal 11.2 (navigation enabled)
    • Gin 5.0.2
    • Gin Toolbar 3.0.1

    The icon is still missing (the patch does not fix this)

  • 🇫🇷France goz

    Testing again, icon is missing with

    • Drupal 11.2.2
    • Dashboard 2.0.0
    • Gin 4.0.6
    • No Gin toolbar
    • No toolbar

    BUT navigation is now using icon API to display icons, so i suggest to do the same.

  • Pipeline finished with Success
    about 1 month ago
    Total: 459s
    #533180
  • 🇫🇷France Grimreaper France 🇫🇷

    Hi,

    Thanks for the MR.

    I have tested it it works.

    But I will create a new MR from 2.0.0 version because patch from current MR can't apply on it.

  • 🇫🇷France Grimreaper France 🇫🇷

    Maybe only needed to squashed commits on MR.

    Here is a patch file from the other branch.

  • Pipeline finished with Failed
    21 days ago
    #550155
Production build 0.71.5 2024