Icons from the "Icons" folder are not displayed when running Web Element using apache2.

[ELForcer]

Steps to reproduce

1. Launch the browser
2. Open Web Element
3. Open any dialog box.
4. Make sure there is no close button.

Outcome

What did you expect?

Show icons

What happened instead?

Error 404

Icons from the "Icons" folder are not displayed when running Web Element using apache2.

The problem lies in the new "icons" folder since at least version 1.11.46.
v1.11.39 did not have an "icons" folder and the icons were in the "img" folder.

The reason why icons from the "icons" folder are not displayed is the default Apache settings in the file
/etc/apache2/mods-enabled/alias.conf which looks like this:

<IfModule alias_module>
# Aliases: Add here as many aliases as you need (with no limit). The format is
# Alias fakename realname
#
# Note that if you include a trailing / on fakename then the server will
# require it to be present in the URL. So "/icons" isn't aliased in this
# example, only "/icons/". If the fakename is slash-terminated, then the
# realname must also be slash terminated, and if the fakename omits the
# trailing slash, the realname must also omit it.
#
# We include the /icons/ alias for FancyIndexed directory listings. If
# you do not use FancyIndexing, you may comment this out.

Alias /icons/ "/usr/share/apache2/icons/"

<Directory "/usr/share/apache2/icons">
Options FollowSymlinks
AllowOverride None
Require all granted
</Directory>

</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

A quick solution is to comment out the line:
Alias /icons/ "/usr/share/apache2/icons/"

But it's better to rename the "icons" folder to something else.

Operating system

No response

Browser information

No response

URL for webapp

No response

Application version

Web Element 1.11.62

Homeserver

No response

Will you send logs?

No

[t3chguy]

Looks like the path is determined by https://github.com/element-hq/compound-design-tokens/tree/main/icons

[Justinzobel]

Thanks for this @ELForcer!

[Michael-Schaer]

This is a quick fix that worked for me: Take the release and run a script inside the unpacked folder. This will move the folder and change the most important links.

#!/bin/bash

BASE_DIR="."
echo "Starting script in folder: $(pwd)"

FILES=(
bold.b7f0698.svg copy.95010ef.svg forward.7d44a5b.svg location-pin-solid.5b99343.svg pop-out.0a8fde3.svg share-screen-solid.c7c1310.svg user-profile-solid.e886eb1.svg
check.aaad650.svg delete.8165351.svg home-solid.88e9e19.svg lock-solid.6847293.svg public.0e971dd.svg strikethrough.17fd61f.svg video-call-declined-solid.0d66d74.svg
check-circle.99c21d7.svg download.364c774.svg image.9142b42.svg mic-off-solid.b535c73.svg qr-code.b517d20.svg take-photo-solid.f40d394.svg video-call-missed-solid.f54bda6.svg
chevron-down.9ea2899.svg error-solid.7cb2e4d.svg info.d42d785.svg mic-on-solid.5e29984.svg quote.60f93d6.svg text-formatting.0b0dd78.svg video-call-off-solid.8b0f3e2.svg
chevron-left.18c22d7.svg expand.867af0b.svg info-solid.ef2d524.svg overflow-horizontal.e4b97af.svg reply.d3e6417.svg threads.52e135e.svg video-call-solid.d584e19.svg
chevron-right.a1fc7b0.svg export-archive.f43ec04.svg inline-code.f51200e.svg pause-solid.a64b426.svg restart.514c8f1.svg threads-solid.7fe60f4.svg volume-on-solid.3f0544f.svg
chevron-up.a7ca3bc.svg extensions-solid.4aa63de.svg italic.be1e35d.svg pin.7c59c5e.svg search.7258145.svg time.8c3060c.svg warning.80e5cc2.svg
close.5ef7caf.svg favourite-solid.a1d4606.svg leave.8b03b57.svg play-solid.05663a6.svg send-solid.9074f92.svg unpin.bb6290d.svg
collapse.fc765b9.svg files.453e84c.svg link.d0734d2.svg plus.95ca4d1.svg settings-solid.94c318a.svg user-add-solid.6a5ddef.svg
)

for filename in "${FILES[@]}"; do
    # Escape regex special chars for sed
    ESCAPED_FILENAME=$(printf '%s' "$filename" | sed 's/[.[\*^$/]/\\&/g')
    
    # Find all files containing this reference
    grep -rl "/icons/$filename" "$BASE_DIR" | while read -r file; do
        echo "Processing folder: $(dirname "$file")"
        sed -i "s|/icons/$ESCAPED_FILENAME|/ui-icons/$filename|g" "$file"
        echo "Updated: $file"
    done
done

# --- Handle index.html separately ---
INDEX_FILE="$BASE_DIR/index.html"

if [ -f "$INDEX_FILE" ]; then
    for filename in "${FILES[@]}"; do
        # Escape regex special chars for sed
        ESCAPED_FILENAME=$(printf '%s' "$filename" | sed 's/[.[\*^$/]/\\&/g')
        sed -i "s|icons/$ESCAPED_FILENAME|ui-icons/$filename|g" "$INDEX_FILE"
    done
    echo "Updated index.html"
fi

# --- Rename icons folder to ui-icons ---
ICON_DIR="$BASE_DIR/icons"
UI_ICON_DIR="$BASE_DIR/ui-icons"

if [ -d "$ICON_DIR" ]; then
    mv "$ICON_DIR" "$UI_ICON_DIR"
    echo "Renamed folder: $ICON_DIR -> $UI_ICON_DIR"
fi

[LBlaboon]

I fixed this for myself by just re-aliasing /icons/ in my VirtualHost for Element to the correct directory within the webapp files, since you don't need directory listings (and hence Apache's icons) for serving Element. That way other VirtualHosts can still use Apache's icons.

In my case:
Alias /icons/ "/usr/share/webapps/element/icons/"

[Michael-Schaer]

For those whose hosting provider does not allow changes to the Apache icons path:

We have automated the procedure of replacing the paths on new releases:
https://github.com/grueneschweiz/element-web-apache