How to find css class in code editor

Store Design
, ,

Topic summary

A user is experiencing an issue where the CSS class material-symbols-outlined is converting their icons into plain text instead of displaying them properly.

Root Cause Identified:
Another user examined the site and found that the CSS file for this class is hosted on Google’s servers, not within the Shopify theme files. This external dependency may be causing the rendering issue.

Two Solutions Provided:

  1. Chrome Inspector Method:

    • Right-click the problematic icon and select “Inspect”
    • Locate the <span class="material-symbols-outlined"> element
    • Use “Reveal in Sources panel” to trace its origin

  2. Shopify Theme Search:

    • Navigate to Online Store > Themes > Edit Code
    • Use Ctrl+Shift+F (Cmd+Shift+F on Mac) to search all files for material-symbols-outlined
    • Check common locations: header.liquid, theme.liquid, sections/header.liquid, or icon snippet files
    • Either replace the <span> with an SVG icon or remove the Google font link entirely

Status: The issue remains unresolved pending the original poster’s action on these suggestions.

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

Hello, this class called ‘material-symbols-outlined’ converts my icons into text. How can I find where the code from the class is positioned, like in which file it is positioned, so I can remove it and hopefully it will not convert my icons into text anymore. I just do not know how to find the class by inspector mode. Please let me know if you know how to do that. URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows

2

@TrendBlend css file is hosted on google, it is not in your theme -

suyash1_0-1744213114699.png
suyash1_0-1744213114699.png1366×768 73.4 KB

3

Option 1: Use Chrome Inspector

  1. Go to your website.

  2. Right-click on the icon that is showing as text.

  3. Click “Inspect” from the menu.

  4. In the panel that opens, look for something like:

    php-template
    search

  5. Hover over that line to see where it is on the page.

  6. Right-click on that line in the inspector, and choose “Reveal in Sources panel” or just note down what the class is and where it’s used.

Option 2: Search in Shopify Theme Files

  1. Go to your Shopify admin.

  2. Go to Online Store > Themes > Edit Code.

  3. Press Ctrl + Shift + F (or Cmd + Shift + F on Mac) to search all theme files.

  4. Search for this term:

    material-symbols-outlined

  5. You might find it in these files:

    • header.liquid

    • theme.liquid

    • sections/header.liquid

    • snippets/icon-search.liquid (or a similar file)

  6. When you find the code, you can:

    • Replace the with an SVG or another icon method you prefer.

    • Or you can stop using the icon set completely by removing the font link.