Server: Icons not showing/transparent

[ticevi]

Hey guys, i started running my nextcloud instance in an docker env and have problems with the app icons. is there something i have to look out for. When inspecting the icons there seems to be valid svg "code" and also represent the correct icon. so no clue why they are not displayed.

Server configuration

Operating system: Debian Stretch

Web server: Nginx

Database: Mariadb

PHP version: 7.2

Nextcloud version: 13.0.6

Updated from an older Nextcloud/ownCloud or fresh install: updated from fresh 13.0.5

Where did you install Nextcloud from: from official tar.gz

Nextcloud configuration:

Config report

{
"system": {
"instanceid": "REMOVED SENSITIVE VALUE",
"passwordsalt": "REMOVED SENSITIVE VALUE",
"secret": "REMOVED SENSITIVE VALUE",
"trusted_proxies": "REMOVED SENSITIVE VALUE",
"trusted_domains": [
"cloud.tluettig.de"
],
"datadirectory": "REMOVED SENSITIVE VALUE",
"overwrite.cli.url": "https:\/\/cloud.tluettig.de",
"dbtype": "mysql",
"version": "13.0.6.1",
"dbname": "REMOVED SENSITIVE VALUE",
"dbhost": "REMOVED SENSITIVE VALUE",
"dbport": "",
"dbtableprefix": "oc_",
"dbuser": "REMOVED SENSITIVE VALUE",
"dbpassword": "REMOVED SENSITIVE VALUE",
"installed": true,
"loglevel": 1,
"maintenance": false,
"mail_smtpmode": "smtp",
"mail_smtpauthtype": "PLAIN",
"mail_from_address": "REMOVED SENSITIVE VALUE",
"mail_domain": "REMOVED SENSITIVE VALUE",
"mail_smtpauth": 1,
"mail_smtphost": "REMOVED SENSITIVE VALUE",
"mail_smtpport": "587",
"mail_smtpname": "REMOVED SENSITIVE VALUE",
"mail_smtppassword": "REMOVED SENSITIVE VALUE",
"mail_smtpsecure": "tls",
"memcache.local": "\OC\Memcache\APCu",
"memcache.locking": "\OC\Memcache\Redis",
"redis": {
"host": "REMOVED SENSITIVE VALUE",
"port": 6379
},
"theme": ""
},
"apps": {
"activity": {
"enabled": "yes",
"installed_version": "2.6.1",
"types": "filesystem"
},
"backgroundjob": {
"lastjob": "85"
},
"bruteforcesettings": {
"enabled": "yes",
"installed_version": "1.1.0",
"types": ""
},
"comments": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "logging"
},
"core": {
"backgroundjobs_mode": "ajax",
"installed.bundles": "[\"CoreBundle\"]",
"installedat": "1536210841.1062",
"lastcron": "1536523315",
"lastupdateResult": "[]",
"lastupdatedat": "1536523310",
"moveavatarsdone": "yes",
"oc.integritycheck.checker": "[]",
"previewsCleanedUp": "1",
"public_files": "files_sharing\/public.php",
"public_webdav": "dav\/appinfo\/v1\/publicwebdav.php",
"scss.variables": "7d1f0e63a875a25a55fa54b870fe1eca",
"umgmt_send_email": "true",
"umgmt_show_email": "true",
"updater.secret.created": "1536240749",
"vendor": "nextcloud"
},
"dav": {
"enabled": "yes",
"installed_version": "1.4.7",
"types": "filesystem"
},
"federatedfilesharing": {
"enabled": "yes",
"installed_version": "1.3.1",
"types": ""
},
"federation": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "authentication"
},
"files": {
"cronjob_scan_files": "500",
"default_quota": "5 GB",
"enabled": "yes",
"installed_version": "1.8.0",
"types": "filesystem"
},
"files_sharing": {
"enabled": "yes",
"installed_version": "1.5.0",
"types": "filesystem"
},
"files_texteditor": {
"enabled": "yes",
"installed_version": "2.5.1",
"types": ""
},
"files_trashbin": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "filesystem"
},
"files_versions": {
"enabled": "yes",
"installed_version": "1.6.0",
"types": "filesystem"
},
"files_videoplayer": {
"enabled": "yes",
"installed_version": "1.2.0",
"types": ""
},
"firstrunwizard": {
"enabled": "yes",
"installed_version": "2.2.1",
"types": "logging"
},
"gallery": {
"enabled": "yes",
"installed_version": "18.0.0",
"types": ""
},
"logreader": {
"enabled": "yes",
"installed_version": "2.0.0",
"levels": "01111",
"ocsid": "170871",
"types": ""
},
"lookup_server_connector": {
"enabled": "yes",
"installed_version": "1.1.0",
"types": "authentication"
},
"nextcloud_announcements": {
"enabled": "yes",
"installed_version": "1.2.0",
"pub_date": "Sat, 10 Dec 2016 00:00:00 +0100",
"types": "logging"
},
"notes": {
"enabled": "yes",
"installed_version": "2.4.1",
"types": ""
},
"notifications": {
"enabled": "yes",
"installed_version": "2.1.2",
"types": "logging"
},
"oauth2": {
"enabled": "yes",
"installed_version": "1.1.1",
"types": "authentication"
},
"password_policy": {
"enabled": "yes",
"enforceHaveIBeenPwned": "1",
"enforceNumericCharacters": "1",
"enforceUpperLowerCase": "1",
"installed_version": "1.3.0",
"types": ""
},
"provisioning_api": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "prevent_group_restriction"
},
"serverinfo": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": ""
},
"sharebymail": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "filesystem"
},
"survey_client": {
"enabled": "yes",
"installed_version": "1.1.0",
"last_report": "{\"id\":\"ocumt7a1w0w6\",\"items\":[[\"server\",\"version\",\"13.0.6.1\"],[\"server\",\"code\",\"other\"],[\"server\",\"enable_avatars\",\"yes\"],[\"server\",\"enable_previews\",\"yes\"],[\"server\",\"memcache.local\",\"\\OC\\Memcache\\APCu\"],[\"server\",\"memcache.distributed\",\"none\"],[\"server\",\"asset-pipeline.enabled\",\"no\"],[\"server\",\"filelocking.enabled\",\"yes\"],[\"server\",\"memcache.locking\",\"\\OC\\Memcache\\Redis\"],[\"server\",\"debug\",\"no\"],[\"server\",\"cron\",\"ajax\"],[\"php\",\"version\",\"7.2.9\"],[\"php\",\"memory_limit\",536870912],[\"php\",\"max_execution_time\",3600],[\"php\",\"upload_max_filesize\",535822336],[\"database\",\"type\",\"mysql\"],[\"database\",\"version\",\"10.3.9\"],[\"database\",\"size\",9109504],[\"apps\",\"activity\",\"2.6.1\"],[\"apps\",\"bruteforcesettings\",\"1.1.0\"],[\"apps\",\"comments\",\"1.3.0\"],[\"apps\",\"dav\",\"1.4.7\"],[\"apps\",\"federatedfilesharing\",\"1.3.1\"],[\"apps\",\"federation\",\"1.3.0\"],[\"apps\",\"files\",\"1.8.0\"],[\"apps\",\"files_sharing\",\"1.5.0\"],[\"apps\",\"files_texteditor\",\"2.5.1\"],[\"apps\",\"files_trashbin\",\"1.3.0\"],[\"apps\",\"files_versions\",\"1.6.0\"],[\"apps\",\"files_videoplayer\",\"1.2.0\"],[\"apps\",\"firstrunwizard\",\"2.2.1\"],[\"apps\",\"gallery\",\"18.0.0\"],[\"apps\",\"logreader\",\"2.0.0\"],[\"apps\",\"lookup_server_connector\",\"1.1.0\"],[\"apps\",\"nextcloud_announcements\",\"1.2.0\"],[\"apps\",\"notes\",\"2.4.1\"],[\"apps\",\"notifications\",\"2.1.2\"],[\"apps\",\"oauth2\",\"1.1.1\"],[\"apps\",\"password_policy\",\"1.3.0\"],[\"apps\",\"provisioning_api\",\"1.3.0\"],[\"apps\",\"serverinfo\",\"1.3.0\"],[\"apps\",\"sharebymail\",\"1.3.0\"],[\"apps\",\"survey_client\",\"1.1.0\"],[\"apps\",\"systemtags\",\"1.3.0\"],[\"apps\",\"theming\",\"1.4.5\"],[\"apps\",\"twofactor_backupcodes\",\"1.2.3\"],[\"apps\",\"unsplash\",\"1.1.1\"],[\"apps\",\"updatenotification\",\"1.3.0\"],[\"apps\",\"workflowengine\",\"1.3.0\"],[\"stats\",\"num_files\",7806],[\"stats\",\"num_users\",3],[\"stats\",\"num_storages\",4],[\"stats\",\"num_storages_local\",1],[\"stats\",\"num_storages_home\",3],[\"stats\",\"num_storages_other\",0],[\"stats\",\"num_comments\",0],[\"stats\",\"num_comment_markers\",0],[\"stats\",\"num_systemtags\",0],[\"stats\",\"num_systemtags_mappings\",0],[\"files_sharing\",\"num_shares\",0],[\"files_sharing\",\"num_shares_user\",0],[\"files_sharing\",\"num_shares_groups\",0],[\"files_sharing\",\"num_shares_link\",0],[\"files_sharing\",\"num_shares_link_no_password\",0],[\"files_sharing\",\"num_fed_shares_sent\",0],[\"files_sharing\",\"num_fed_shares_received\",0],[\"encryption\",\"enabled\",\"no\"],[\"encryption\",\"default_module\",\"no\"]]}",
"last_sent": "1536522539",
"types": ""
},
"systemtags": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "logging"
},
"theming": {
"cachebuster": "6",
"color": "#BCC9C2",
"enabled": "yes",
"installed_version": "1.4.5",
"logoMime": "image\/svg+xml",
"types": "logging"
},
"twofactor_backupcodes": {
"enabled": "yes",
"installed_version": "1.2.3",
"types": ""
},
"unsplash": {
"enabled": "yes",
"installed_version": "1.1.1",
"types": ""
},
"updatenotification": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "",
"update_check_errors": "0"
},
"workflowengine": {
"enabled": "yes",
"installed_version": "1.3.0",
"types": "filesystem"
}
}
}

Are you using encryption: no

Client configuration

Browser:Firefox,Safari,Chrome

Operating system:MacOS

[nextcloud-bot]

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/10877 (Comment icon is not shown on shared folder), https://github.com/nextcloud/server/issues/2466 ("Loading" svg is not transparent), https://github.com/nextcloud/server/issues/6891 (Folder icons disappeared), https://github.com/nextcloud/server/issues/5157 (Icon inconsistency), and https://github.com/nextcloud/server/issues/6618 (Transparent profile pictures show up purple.).

[ticevi]

I couldn't find a solution to this problem. When I call the URL directly, the icon is displayed correctly.

All tips are helpful.

[rootbdfy]

Same issue.

[rootbdfy]

UPD: fix it with sudo -u www-data php occ maintenance:repair
👍

[ticevi]

I have already tried several occ commands. The maintenance:repair has restored some of the icons, but not the big ones in the navbar.
I'm thinking about migrating to one of the provided docker images.

 

[guigui6]

I just install Nextcloud 15 on my OVH web server and I have the same issue.
The problem appear only with https, I don't know how to fix this...

[rootbdfy]

guigui6 try to open profiler in browser.

[rootbdfy]

guigui6 try to open profiler in browser.

[ffs69]

Hello and to all a very good new year!

Just to tell you that I think I have a bug of the same type I detailed here:
https://help.nextcloud.com/t/through-https-missing-the-customization-of-the-login-screen-and-the-display-of-some-icons-and-fields-but-invisible-locations-are-clickable-since-my-first-installation-from-nc13-to-nc15-reacts-differently-according-to-the-shared-web-hosting-service/38981

Hoping that we find solutions to our problems,
Cheers :metal:

[hottwister]

Hey guys, try to change the color in the Theming app. Just change the color to a random value and change it back once its saved. The icon's will be regenerated in the right color and the issue is fixed.

Profit!

[rootbdfy]

Change the color in the Theming app did not work for me.

[koebln]

I have the same Problem, most of the functional Icons are invisible but if you know the position and klick the function will work. Changing the color in the Theming did not work for me. I build up a new Nextcloud today with the zip-File
Nextcloud Version: 15.0.7
PHP: 7.2 (fpm)
Web-Server: nginx

[josebatorre]

This same issue happened to me yesterday after a 14.0.4 ->15.0.7 upgrade.

After breaking some extra things I had to delete the content of $DATADIR/data/appdata_$instanceid/css/systemtags, and now icons are back. Don't ask me why

HTH

[RobinJespersen]

This same issue happened to me yesterday after a 14.0.4 ->15.0.7 upgrade.

After breaking some extra things I had to delete the content of $DATADIR/data/appdata_$instanceid/css/systemtags, and now icons are back. Don't ask me why

HTH

tested, not working for me :-/

[koebln]

Even worse,
I generated a brand new virtual machine based on Ubuntu 18.04 today and made an install of Nextcloud via Snap. So everything is new except the IP-Adress and the Domain-Name.
What happend: Icons not showing/transparent
I really don't understand what causes this mess. I was sure, a Snap-Install would blow away all odd dependencies.

[koebln]

After all, the fact that a new installation had the same problem with "missing Icons" showed that the reason is outside of the VM and Nextcloud Software.
I use a reverse proxy based on Nginx to split up the web services. I changed my Site-Konfiguration as written in https://help.nextcloud.com/t/nginx-reverse-proxy-what-to-write-in-nextclouds-config-php/9149/5.

server {
    listen 80;
    server_name cloud.example.com;

    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name cloud.example.com;

    access_log /var/log/nginx/cloud.example.com.access.log;
    error_log /var/log/nginx/cloud.example.com.error.log;

    client_max_body_size 0;
    underscores_in_headers on;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/cloud.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/cloud.example.com/privkey.pem;

    ssl_stapling on;
    ssl_stapling_verify on;

    location / {
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 64;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        add_header Front-End-Https on;
        # whatever the IP of your cloud server is
        proxy_pass http://192.168.1.50;
    }
}

I don't know, which aspect made the change, but
It' working now!

[sparse91]

UPD: fix it with sudo -u www-data php occ maintenance:repair
+1

That fixed the problem for me.

[skjnldsv]

Yes, the usual steps are:

1. clear your browser's cache
2. run an occ maintenance:repair on your server
3. check browser console log for errors
   
   
   

   How to access your browser console (Click to expand)

# Chrome

• Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.
• Alternative method:
  
  
  
  1. Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
  
  
  2. Click the “console” tab.
  
  

# Safari

• Press CMD + ALT + I to open the Web Inspector.
• See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)

# IE9

1. Press F12 to open the developer tools.
2. Click the “console” tab.

# Firefox

• Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).
• or, if Firebug is installed (recommended):
  
  
  
  1. Press F12 to open Firebug.
  
  
  2. Click on the “console” tab.
  
  

# Opera

1. Press CTRL + SHIFT + I to open Dragonfly.
2. Click on the “console” tab.
   
   
   
   
   1. make sure your webserver config is okay and properly serving all css files.
   
   

Anyone still having the issue? Or shall we close?

[Bitfroest]

Hey guys, try to change the color in the Theming app. Just change the color to a random value and change it back once its saved. The icon's will be regenerated in the right color and the issue is fixed.

Profit!

@hottwister Thanks that worked for me!

Installed a Nextcloud 15.0.7 Docker container behind a NGINX reverse proxy (https). Initially the Icons for sharing and the contacts menue were missing. After changing the color in theme options everything looks fine now :D

[wwp]

Hi there! I ve just installed nextcloud 16.0.1 on a fresh host (OVH mutualized, php 7.3), when accessed and configured the first time using http://, everything around theming and accessibility/dark colors works. Once accessed thru https://, most top-toolbar or action icons are missing, accessibility/dark is useless, theming doesn't apply at login screen and no way to fix it following the workarounds explained above.

[Blinkenn]

I had some leftover code from an owncloud install that i was using, I had to add svg to this snippet in my site code:

    # Optional: set long EXPIRES header on static assets
    location ~* ^/nextcloud(/.+\.(jpg|jpeg|gif|bmp|ico|png|css|js|svg|swf))$ {
        expires 30d;
        access_log off;  # Optional: Don't log access to assets
    }

[skjnldsv]

Hello! As this is a configuration issue I will close the issue.
I cannot reproduce the issue and checking the official docs will give you the proper apache/nginx configurations to have :)

[abctaylor]

Can confirm, changing theme colours temporarily worked for me.

[RobinJespersen]

Can confirm, changing theme colours temporarily worked for me.

same here

[mrjive]

Unluckily changing colour and doing maintenance:repair did not solve the issue, as some icons are missing. App icons are correctly displayed.

[sonic42]

my transparent icon problem solves this:
https://github.com/nextcloud/cms_pico/issues/34

the Content-Security-Policy in the web server configuration was the reason.

Header set Content-Security-Policy "default-src 'self';frame-ancestors 'self';style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src 'self' data:;font-src 'self' data:"

worked for me.

[0x9060]

I've had the same issue. New Nextcloud server behind Traefik reverse proxy in Docker container. I also had CSP headers enabled.

my transparent icon problem solves this:
nextcloud/cms_pico#34

the Content-Security-Policy in the web server configuration was the reason.

Header set Content-Security-Policy "default-src 'self';frame-ancestors 'self';style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src 'self' data:;font-src 'self' data:"

worked for me.

This works for me as well, but I really don't want to configure CSP this way, particularly: Content-Security-Policy "default-src 'self';style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval'".

style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval' are insecure and may leave the app vulnerable to XSS. Is there a more strict directive we could use to retain intended functionality?

[DeKubus]

@0x9060 If you just need the icons, add

img-src 'self' data:

to your Traefik config

EDIT: Just noticed that script-src 'self' 'unsafe-inline' is still needed for NC - meh.

[FDVCZ]

Yes, the usual steps are:

1. clear your browser's cache
2. run an occ maintenance:repair on your server

3. check browser console log for errors

   How to access your browser console (Click to expand)

   Chrome

   • Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.

   • Alternative method:

     1. Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
     2. Click the “console” tab.

   Safari

   • Press CMD + ALT + I to open the Web Inspector.
   • See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)

   IE9

   1. Press F12 to open the developer tools.
   2. Click the “console” tab.

   Firefox

   • Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).

   • or, if Firebug is installed (recommended):

     1. Press F12 to open Firebug.
     2. Click on the “console” tab.

   Opera

   1. Press CTRL + SHIFT + I to open Dragonfly.
   2. Click on the “console” tab.
4. make sure your webserver config is okay and properly serving all css files.

Anyone still having the issue? Or shall we close?

I have to report this bug appeared again on our NextCloud 18.0.4.

We already had this issue once in the past, now it is here again.
Same situation as can be seen on screenshots posted above = for no obvious reason icons are suddenly missing.
We know how to repair it, but it is very annoying, could you please fix it for good = prevent this situation?

[btxtiger]

I'm having the issue inside the passwords app. Repair command didn't help.
In different browsers and devices. Its just awful that such issues exist in 2020.