Add icons in menu drawer items on phone instead of emoji's

Shopify Discussion
,

Topic summary

A user working with Shopify’s Dawn theme wants to replace emoji icons with Google Font icons in their mobile menu drawer.

Solution Provided:

The response outlines a multi-step implementation:

  • Add Google Material Icons stylesheet link to the theme’s head section
  • Locate the mobile menu items in the theme code
  • Use conditional Liquid logic to assign specific icons based on menu item titles
  • Insert icon spans before menu link text

A code example demonstrates using {% if %} statements to match menu titles (Home, Shop, Contact) with corresponding Material Icons (home, shopping_bag, mail).

Status: The question appears answered with a technical implementation guide, though no confirmation of successful implementation has been posted.

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

Hello, how can I use google font icons in my main menu instead of using emoji’s? I’m using DAWN Theme: Glow Curtain: 400 LED-lampjes voor een magische sfeer – InteriorGlows

Schermafbeelding 2025-04-28 113244.png
Schermafbeelding 2025-04-28 113244.png1919×1079 191 KB

2

Hi,

Hope this will help

  • Add Google Material Icons to Your Store
    Code example for head section
- Find Where Mobile Menu Items Are - Insert Icons Next to Menu Links - Pick Different Icons for Different Menu Items Code example 
{% if link.title == 'Home' %}
  home
{% elsif link.title == 'Shop' %}
  shopping_bag
{% elsif link.title == 'Contact' %}
  mail
{% endif %}
{{ link.title }}