# [Bug] Misaligned and Missing Icons in Left Sidebar Navigation – Geography Section #1116
Assignees
spikerj (Joseph Spiker)
Clear assignees
spikerj (Joseph Spiker)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: spikerj/spikersoft-issues#1116
Reference in new issue
Block a user
Summary
The left sidebar navigation in the Geography Explorer interface shows misaligned elements and missing icons for certain categories. The issue affects both vertical centering and icon rendering, leading to inconsistent visual presentation.
Issue Description
In the Geography section, the sidebar icons are not properly centered within their containers. Some icons appear shifted vertically or horizontally, while others fail to render entirely. The alignment inconsistency disrupts the visual balance of the sidebar and makes navigation less intuitive.
Environment
Preconditions
User must be logged in and have access to the Geography Explorer interface.
Steps to Reproduce
Expected Result
All sidebar icons should be properly centered and visible, maintaining consistent spacing and alignment across all categories.
Actual Result
Evidence
Impact
Frequency
Always
Reproducibility
100%
Severity
Medium
Notes
The issue may be caused by incorrect CSS alignment or missing icon assets. It is recommended to verify the icon font or SVG source paths and adjust the flexbox or grid alignment properties for consistent centering.
Confirmed — and there are four broken icons, not two. You could only see two because of the bug you filed next door (#1117): the rail could not scroll, so the other two were below the fold.
The app self-hosts the older Material Icons font, but four interests were given names from the newer Material Symbols set. A name that does not exist in the font renders as nothing at all — no console error, no fallback, just an empty tile:
telescoperaventargethorseI checked the live interests API against the official icon list to find all four rather than just the ones on screen.
One detail worth knowing: the seeder only ever added missing interests, never corrected existing ones — so simply fixing the list would not have repaired any environment that had already been seeded, which is all of them. The fix repairs those four values in place as well.
Fix: spikerj/spikersoft-backend#784.
Honest caveat: Birding and Horseback are approximations — the older icon font has no bird and no horse, so they get a stylised bird and an activity glyph. Getting the exact icons would mean moving the whole app to the newer font set, which is a much larger change than this bug justifies. If they read badly to you once deployed, say so and we can pick different ones.
Fixed and merged — closing.
Four tiles used legacy Material Icons names that do not exist in the icon font this app ships, so they rendered blank. Names corrected with a repair map for existing data (spikerj/spikersoft-backend#784), alongside the sidebar fixes in spikerj/spikersoft-angular#898.
The change is on
masterand deployed. Please re-test when you get a chance; if you still see it, reopen this issue rather than filing a new one so the history stays together.