Dashboard icon not visible in admin-navigation if css is aggregated

Open on Drupal.org →

Created on 1 April 2025, 2 months ago

Problem/Motivation

When css is aggregated, the Dashboard icon in gin admin-navigation does not show up.

Inspecting the code in browser,
when no preprocess is activated, css is
--icon: url(../../media/sprite.svg#grid-view);
(working)

when aggregated, css is
--icon: url(/modules/contrib/varbase_dashboards/media/sprite.svg#grid-view);
(not working)
while it is
--icon: url(/themes/contrib/gin/dist/media/sprite.svg#create-view);
for the other admin-navigation icons
(/themes/contrib/gin/dist/media/sprite.svg#grid-view is working when set manually)

Steps to reproduce

Activate css aggregation preprocess => no icon
Deactivate css aggregation preprocess => icon is visible

Proposed resolution

We could
- set preprocess: true for the css in admin-navigation library
- set icon path from drupal root instead of relative
but neither looks right / future proof

Do we need to use a hook_css_alter or another one to set the proper path ?

Remaining tasks

✅ File an issue about this project
❌ Addition/Change/Update/Fix to this project
❌ Testing to ensure no regression
➖ Automated unit/functional testing coverage
➖ Developer Documentation support on feature change/addition
➖ User Guide Documentation support on feature change/addition
➖ UX/UI designer responsibilities
➖ Accessibility and Readability
❌ Code review from 1 Varbase core team member
❌ Full testing and approval
❌ Credit contributors
❌ Review with the product owner
❌ Update Release Notes and Update Helper on new feature change/addition
❌ Release

Varbase update type

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

🐛 Bug report

Status

Active

Version

1.0

Component

Code

Created by

🇧🇪Belgium f2boot

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Merge Requests

!3Dashboard icon not visible in admin-navigation if css is aggregated
Open
🇯🇴Jordan Qusai Taha
updated about 21 hours ago
!2Dashboard icon not visible in admin-navigation if css is aggregated
Closed
🇯🇴Jordan Qusai Taha
updated about 24 hours ago
!1Dashboard icon not visible in admin-navigation if css is aggregated
Closed
🇯🇴Jordan Qusai Taha
updated about 24 hours ago

Comments & Activities

Issue created by @f2boot
Comment 2 months ago →
🇯🇴Jordan Rajab Natshah Jordan
Thanks for reporting!
Following up on the proposed fixes.
Comment 1 day ago →
🇯🇴Jordan Qusai Taha Amman
qusai taha → made their first commit to this issue’s fork.
Merge request !1Issue #3501434: Switch the dependency for the Statistics module from Drupal... → (Closed) created by Qusai Taha
Comment about 24 hours ago →
System Message
qusai taha → closed merge request !1
Merge request !2Issue #3501434: Switch the dependency for the Statistics module from Drupal... → (Closed) created by Qusai Taha
Comment about 24 hours ago →
System Message
qusai taha → closed merge request !2
Merge request !3Issue #3516733 by qusai taha, f2boot: Fix not visible dashboard icon in admin navigation when css aggregation is enabled → (Open) created by Qusai Taha
Comment about 24 hours ago →
🇯🇴Jordan Qusai Taha Amman
Comment about 21 hours ago →
🇯🇴Jordan Rajab Natshah Jordan
Thanks, Qusai, for the MR.
I had a quick look.
Better if we switch to --icon: url(../../images/web-dashboard.svg); in CSS

-webkit-mask-image: url(../../images/web-dashboard.svg) !important; mask-image: url(../../images/web-dashboard.svg) !important;
Not to add one more file.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024