Icons are displaying as TEXT on desktop

Topic summary

A user reports that product page icons are rendering as half-capped text on desktop while displaying correctly as icons on mobile.

Root Cause Identified:

  • The issue stems from conflicting CSS classes applied to the icons
  • Both material-icons and material-symbols-outlined classes are being used simultaneously
  • The material-symbols-outlined class overrides the correct one but lacks the required icon definitions

Proposed Solutions:

  • Remove the conflicting material-symbols-outlined class, keeping only material-icons
  • The issue likely originates from BlockyApp settings or a glitch within the app
  • One respondent suggests broader theme maintenance or switching to a new theme, noting multiple display issues beyond just the icons

Status: The technical cause has been diagnosed, but implementation of the fix remains pending.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.

Hello,

I got this error in which my icons show up as half-capsed text on desktop. But my icons show up as icons on mobile. So it is working on mobile but not on desktop. Does anyone know why?
URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows

Honestly, your theme currently needs quite a bit of attention. At the moment, many elements are not displaying correctly, which makes it difficult to provide a reliable solution in this situation.

I would recommend either maintaining and fixing the current theme or considering installing a new, well-structured theme to ensure everything works smoothly.

You’re applying two classes to your icons, material-icons and material-symbols-outlined, while you must use only the first one for them. Since you’ve applied both, the second one takes over, but does not have required icons.

Looks like you’re using BlockyApp for this, so can be a matter of settings, or a glitch in the app.

1 Like