[3.x]: Multiple icons missing in CP

[proimage]

What happened?

Description

Recently (I wish I could point to a specific update but I cannot), I've noticed that multiple icons are missing from the Craft CP (EDIT: in Chrome Version 103.0.5060.114 (Official Build) (64-bit)):

At first I thought it was all first-party icons in the main menu, but then I saw that GraphQL was still intact. Here's the rendered source from devtools of the GraphQL and Utilities menu items:

I have cleared the Control panel resources cache, to no effect. There are no errors in the console.

EDIT: Additional findings... this is not happening in Firefox. It does happen in a Chrome Incognito window.

Steps to reproduce

1. No idea... it just is.

Expected behavior

I'd expect all the usual icons to show up.

Actual behavior

The SVG for many icons isn't being included/rendered/injected into the source code.

Craft CMS version

3.7.43

PHP version

7.4.3

Operating system and version

Windows 11 Version 21H2 (OS Build 22000.795)

Database type and version

MySQL 5.6.47.0

Image driver and version

Imagick 3.4.4 (ImageMagick 6.9.10-23)

Installed plugins and versions

• Azure Blob Storage 1.0.1
• Button Box 2.0.4
• Colorit 1.1.2.1
• Cookie Consent Banner 1.2.9
• Cookies 1.1.15
• Craft Color Mixer 1.0.9
• Field Manager 2.2.4
• Freeform 3.13.10
• Icon Picker 1.1.12
• Imager X v3.5.8
• Inventory 2.1.1
• Isolate 1.4.4
• Linkit 1.1.12.1
• LJ Range Slider 1.0.0
• Maps 3.9.3
• MatrixMate 1.4.3
• Minify 1.2.11
• Mix 1.5.2
• Navigation 1.4.26
• Neo 2.13.10
• oEmbed 1.3.15
• Postmark 2.1.0
• Redactor 2.10.8
• SEO 3.7.4
• Super Dynamic Fields 1.0.7
• Super Table 2.7.2
• Table Maker 2.0.1
• Tags 1.0.9
• Wordsmith 3.3.1.1

[brandonkelly]

A couple people have reported this in Discord as well, but we haven’t been able to get to the bottom of it. It appears to be something to do with a recent update to Chrome, however we are unable to reproduce it ourselves using the same version.

[proimage]

Hmm. I'd love to do what I can to troubleshoot this; I am encountering this problem across all the Craft 3 sites I manage. FWIW, it doesn't seem to happen on a Craft 2.9.2 site I have access to.

I've disabled the three Chrome extensions I had that were allowed in Incognito mode, but it didn't make any difference.

It seems telling to me that the svg code itself is missing from the compiled source view in devtools. I take it the SVGs are getting inserted via JS for some reason, rather than by Twig?

[stephanwergles]

For me, this error has also been occurring recently. My feeling is that it happened shortly after an update of Chrome and that across different installations. I can also confirm that the error occurs in the incognito window, Firefox and all other browsers have no problems. In my case, the console does not show any traceable errors either.

[watarutmnh]

The same issue here with Chrome Version 103.0.5060.134, but no issue with Chrome Canary Version 105.0.5190.0. Both are the latest version.

[thupsi]

Can confirm this is an issue also in Craft 4, in Chrome 103.0.5060.134, Windows 11

[thupsi]

It's pretty weird. When I manually add the below css to the inspector stylesheet it works as expected:

.sidebar nav li a .icon span[data-icon]:before {
    display: block;
}

[data-icon]:before {
    content: attr(data-icon);
}

#help:before, .element:before, .go:after, .icon:before, .insecure:before, .menu .flex.padded.sel:before, .menu ul.padded li a.sel:before, .preview-btn:before, .required:after, .secure:before, .texticon:before, .view-btn:before, [data-icon-after]:after, [data-icon]:before {
    speak: none;
    -webkit-font-feature-settings: "liga","dlig";
    -ms-font-feature-settings: "liga","dlig";
    -o-font-feature-settings: "liga","dlig";
    font-feature-settings: "liga","dlig";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: normal!important;
    direction: ltr;
    display: inline-block;
    font-family: Craft;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    opacity: var(--icon-opacity);
    text-align: center;
    text-transform: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

but

If I open the cp.css file via the dev tools and add the same rules, it doesn't work.

but still

If I open the cp.css file via the dev tools and add the same rules with this selector .sidebar nav li a .icon span:before, (notice the missing [data-icon]) it works!

So...

Maybe the data-icon attribute is later injected in the html (after loading cp.css) and the renderer is somehow tripped up? I don't even know if that is possible, but something is happening.

Edit: The more I think about it, my above explanation seems implausible, still my observations about the css selector should be a clue to the actual root cause.

Edit 2: Also tried Dev and Canary channels with no plugins installed, same issue.

[thupsi]

The same issue here with Chrome Version 103.0.5060.134, but no issue with Chrome Canary Version 105.0.5190.0. Both are the latest version.

Sadly, Chrome Canary 105.0.5191.0 doesn't work for me.

[thupsi]

Yet another update: I can't reproduce the issue on my laptop (up to now I was testing on my desktop), running the exact same version of Windows, Chrome, Craft etc. Hmm, very weird.

[proimage]

I think the first thing we need to figure out is how those <svg> icons end up on the page: are they injected by Javascript, or does Twig build the page with them as part of the source code?

[twitcher07]

I can confirm this is happening to me in Chrome Version 103.0.5060.114. This Craft sidebar looks like this for me:

In Firefox version 102.0.1 the icons seem to be working just fine:

My Craft version is 3.7.30.1.

[thupsi]

I think the first thing we need to figure out is how those <svg> icons end up on the page: are they injected by Javascript, or does Twig build the page with them as part of the source code?

The template file is this: https://github.com/craftcms/cms/blob/75d999d9a5d5351186d02a6a8286f89ae4c035b3/src/templates/_layouts/components/global-sidebar.twig

At about line 31 you can see that the icon is either an <svg>, or a font icon. In our case the SVGs (for example thr GraphQL icon) are displaying correctly, but the font icons are not.

[thupsi]

OK, so, investigating further, try this: Open cp.css via devtools and add this line at the end of the file:

[data-icon="section"]{ }

As you can see, it's just an empty rule, referencing the data-icon attribute of the entries nav item.

Result:

That's crazy! It's like the browser doesn't match elements with the [data-icon] attribute selector unless you include even an empty rule with a value match, like [data-icon=value]. I don't know if it's JS related, but it keeps getting weirder 🙃

[proimage]

Ok, you wanna see something even weirder? It seems like whatever the value is of that [data-icon="..."] selector is, is treated as a wildcard. So it fixes the icons for anything containing the letter(s) specified. I tried with the most common letters, vowels:

[data-icon="a"]:

[data-icon="e"]:

[data-icon="i"]:

...etc.

This bug is almost as perplexing as that time ~15+ years ago when I was building my brother's PC for him, and powered the thing on, only to hear absolutely nothing... no case fans, no CPU fan, no HDD spinning, and no PSU fan... nothing was physically moving. And yet somehow, it POSTed! 🤪

[turnstylerj]

Super weird, I just noticed this after updating to Chrome 103.0.5060.134. Happening on multiple sites I'm sure were showing all the icons prior to today with the same version of Craft/plugins. Happening on both Craft 3 and Craft 4 sites on my end, and only in Chrome.

[proimage]

Font icons are no longer best practice these days (were they ever?), so perhaps at the very least this should be seen as a reason to switch to SVGs across the board in Craft? @brandonkelly

[alexr8]

One additional annoying part of this bug is the blue globe icons don't show up in the entries table view, so you can't open an entry on the front end without going into the entry (or checking it and using the dropdown view entry). these icons: Can also confirm its happening on craft 3 and 4 sites for me, only in chrome (MacOS), currently v103.0.5060.134 but it happened on the previous version i had too before updating.

[bymayo]

Yeah we're also experiencing this issue, it looks specific to Chrome Version 103.0.5060.134 (Official Build) (arm64)

Plugin icons load fine, it's just Craft's own icons (Entries, Utilities etc) that don't load.

Affects Craft 3 & Craft 4

[croxton]

Also seeing this bug and it affects all versions of Craft 3 that I've tried, unfortunately.

Chrome Version 103.0.5060.134 (Official Build) (arm64)

I've also seen some hints of odd behaviour with CSS generally when hard refreshing various webpages in this latest version of Chrome - very occasionally, CSS styles don't get applied or only some styles. Which is troubling!

[croxton]

Quick workaround:

Install the Control Panel CSS plugin for Craft CMS: https://github.com/doublesecretagency/craft-cpcss

Craft 4: composer require doublesecretagency/craft-cpcss

Craft 3: composer require doublesecretagency/craft-cpcss:2.4

Install the plugin, go to it's settings and paste in this CSS to restore all your icons:

[data-icon]::before {
	content: attr(data-icon);
}
.icon::before, .menu ul.padded li a.sel::before, .menu .flex.padded.sel::before, .texticon::before, .element::before, #help::before, .secure::before, .insecure::before, .go::after, .required::after, #preview-btn::before, #share-btn::before, [data-icon]::before, [data-icon-after]::after {
	font-family: "Craft";
	speak: none;
	-webkit-font-feature-settings: "liga","dlig";
	-ms-font-feature-settings: "liga","dlig";
	-o-font-feature-settings: "liga","dlig";
	font-feature-settings: "liga","dlig";
	text-rendering: optimizeLegibility;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	text-align: center;
	font-style: normal;
	vertical-align: middle;
	word-wrap: normal !important;
	-webkit-user-select: none;
	user-select: none;
	opacity: .8;
}
body.ltr .meta > .field > .input > .datewrapper .text + div[data-icon], body.ltr .meta > .field > .input > .timewrapper .text + div[data-icon], body.ltr .meta > .field > .input > .datetimewrapper > .datewrapper .text + div[data-icon], body.ltr .meta > .field > .input > .datetimewrapper > .timewrapper .text + div[data-icon], body.ltr .meta > .flex-fields > .field > .input > .datewrapper .text + div[data-icon], body.ltr .meta > .flex-fields > .field > .input > .timewrapper .text + div[data-icon], body.ltr .meta > .flex-fields > .field > .input > .datetimewrapper > .datewrapper .text + div[data-icon], body.ltr .meta > .flex-fields > .field > .input > .datetimewrapper > .timewrapper .text + div[data-icon] {
	left: 0;
}
.datewrapper .text:placeholder-shown + div[data-icon], .datewrapper .text:placeholder-shown + div[data-icon]::before, .datewrapper .text.empty-value + div[data-icon], .datewrapper .text.empty-value + div[data-icon]::before, .timewrapper .text:placeholder-shown + div[data-icon], .timewrapper .text:placeholder-shown + div[data-icon]::before, .timewrapper .text.empty-value + div[data-icon], .timewrapper .text.empty-value + div[data-icon]::before {
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}
.datewrapper .text:placeholder-shown + div[data-icon], .datewrapper .text.empty-value + div[data-icon], .timewrapper .text:placeholder-shown + div[data-icon], .timewrapper .text.empty-value + div[data-icon] {
	display: block;
	position: absolute;
	top: calc(50% - 12px);
	z-index: 0;
	color: #606d7b;
}
.datewrapper .text + div[data-icon], .timewrapper .text + div[data-icon] {
	display: none;
}
.sidebar nav li a .icon span[data-icon] {
	font-size: 16px;
}

[croxton]

Note that the bug appears to be that Chrome does not apply any rules that contain [data-icon] in cp.css.

Update: icons are working for me in latest Canary: Version 105.0.5195.0 (Official Build) canary (arm64)

[digason]

Icons are not showing in the latest Chromium dev build: Version 106.0.5196.0 (Developer Build) (x86_64)

I suspect this issue will show up on other Chromium based browsers at some point, like Edge and Opera.

[mmikkel]

FWIW, I'm not able to reproduce (i.e. icons are visible) on Chrome 103.0.5060.134 (Official Build) (arm64) on macOS 12.4.

[proimage]

FWIW, I'm not able to reproduce (i.e. icons are visible) on Chrome 103.0.5060.134 (Official Build) (arm64) on macOS 12.4.

Could you try under Windows (using browserstack or parallels or whatever)? Perhaps it's a Chrome + Windows issue.

[mmikkel]

FWIW, I'm not able to reproduce (i.e. icons are visible) on Chrome 103.0.5060.134 (Official Build) (arm64) on macOS 12.4.

Could you try under Windows (using browserstack or parallels or whatever)? Perhaps it's a Chrome + Windows issue.

The issue has already been seen on Mac, so that doesn’t seem to be the case. The problem seems more complicated than just a platform/version thing; maybe it’s something to do w/ Chrome configuration settings (perhaps some specific combination of security options or the like?)

[adrianjean]

I too am seeing this — on nearly every CraftCMS site I update to the latest version. I also notices other icons are missing on other system pages like down arrows and such. Works in Safari, works in FireFox — so odd.

Platform: MacOS 12.4 (21F79) Browser: Chrome - 103.0.5060.134 (Official Build) (arm64) Craft: Craft CMS 3.7.48 Pro

Plugins Installed (All up to date): AsyncQueue Button Box Control Panel CSS (I tested without this as well) Control Panel Nav (I tested without this as well) Dashboard Begone Eager Beaver Enupal Backup Expanded Singles Formie Freeform Knock Knock Redactor Redactor Anchors Redactor Custom Styles Retour SEOmatic SendGrid Sprig Super Table

[turnstylerj]

I just realized I'm also missing the field handle icons and translatable field icons in settings, as well as the translatable field icons in entry views for authors, which feels like a much bigger deal.

Also on macOS v12.2.1.

[croxton]

Not sure how this helps but I've discovered that you can have a maximum of ~44 individual CSS rules in cp.css that reference [data-icon]. Any more and the icons disappear. It is the number of rules rather than anything specific about them that matters.

It would suggest that Chrome has a maximum quota for the number of matches for a given selector in a single stylesheet.

[croxton]

Resetting Chrome restored the icons for me, on Version 103.0.5060.134 (Official Build) (arm64)

Go to chrome://settings/ and click Reset settings from the menu.

[alexr8]

As far as i know I've not changed anything (in terms of updating chrome, resetting settings, changing craft versions or updating my OS in any way), and my icons seem to appearing now just fine (questioning my sanity at this point 😅). Anyone else?

[iamtompickering]

@alexr8 same thing has happened to me today!

I've not touched anything on my machine and suddenly everything is back to normal.

I've not updated Chrome, and it is running Version 103.0.5060.134 (Official Build) (arm64)