Material-design-icons: Font icon names are indexed by search engines

[deepfriedbrain]

I'm using font icons in my page h1 header for e.g.:

<i class="material-icons">thumb_up</i> My Page Title</h1>

I noticed that my page shows up as thumb_up My Page Title in Google SRPs. Is there a way to avoid this, other than removing the icons from the header or switching to image icons?

Thanks.

[shyndman]

Hi @deepfriedbrain,

In this case, we recommend that you reference the icon using its codepoint. For thumb_up, you'd write this:

<i class="material-icons">&#xE8DC;</i>

You can find the complete mapping between icon names and their codepoints here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

[deepfriedbrain]

That's what I ended up doing but it's a very poor workaround. I lose the advantage of using readable icon names or add those readable names as comments wherever I'm using Material Icons.

Why doesn't Material Icons use the approach similar to Font Awesome (make the icon name a CSS class)? Were you not aware of the problems with search engines (especially Google) indexing those names?

[MrXyfir]

A year and a half later, are there any better solutions for this yet?

[ZdrowyGosciu]

Maybe this solution could help https://stackoverflow.com/questions/37281861/how-to-use-google-material-icons-as-class-instead-of-i-tag

[voyula]

This problem is huge problem for SEO

And

I prepared a repository for solution(SEO Friendly).
You can use material-icons font as css classes like Font Awesome, etc.
https://github.com/voyula/material-icons-font-classes

<!-- Using of material-icons font with classes. -->
<span class="material-icons m_i_ICON_TAG_HERE"></span>

<!-- Example -->
<span class="material-icons m_i_home"></span>

Please give star to repository to make people reach.

[kjdeepak]

Hi @deepfriedbrain,

In this case, we recommend that you reference the icon using its codepoint. For thumb_up, you'd write this:

<i class="material-icons">&#xE8DC;</i>

You can find the complete mapping between icon names and their codepoints here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

This link is no more working. Did any one found solution to this issue?

[MrXyfir]

The best solution is don't use font icons. Use SVG icons.