Using icon code as text is not SEO-optimal

[andrey-helldar]

Search engines when indexing the site read all the content. Thus, the code of icons is perceived by them as part of the content, which is harmful to search engine promotion and can be considered by search engines as excessive filling of the site with keywords.

image 1

image 2

To solve this problem, use the content property of CSS style:

.material-icons.mi-face:before {
  content: 'face';
}

Thus, both spellings of the code will be correct, but in the second case, the icon will not be taken into account by search engines as content:

<i class="material-icons">face</i>
<i class="material-icons mi-face"></i>

The prefix mi- is chosen because the use of the icon code as classes may conflict with other styles used on the site, and the prefix gives the uniqueness of the class name.

Since the additional styles file occupies 63.7 Kb of space, its connection is not mandatory for those who do not need it.

Example without additional styles:

<link href="material-icons.css" rel="stylesheet">

<i class="material-icons">face</i>
<i class="material-icons mi-face">face</i> <!-- not working -->

Example with additional styles:

<link href="material-icons.css" rel="stylesheet">
<link href="material-icons-content.css" rel="stylesheet">

<i class="material-icons">face</i>
<i class="material-icons mi-face">face</i> <!-- working -->

[denunv]

How about this?

<i class="material-icons" data-icon="face"></i>

.material-icons::before {
  content: attr(data-icon);
}

[cyberalien]

You can try Iconify instead of font.

It uses similar syntax, but renders SVG instead of text. Best part is it loads only icons used on page and is available with many other icon sets (FontAwesome, Templarian's MDI, few emoji sets), not just material design icons so you can mix them all on same page without loading massive fonts.

Add this instead of including font:

<script src="https://code.iconify.design/1/1.0.0/iconify.min.js"></script>

Then use code like this for icons:

<span class="iconify" data-icon="ic-face" data-inline="false"></span>

See:

• https://github.com/iconify-design/iconify (GitHub repository for Iconify script)
• https://iconify.design/icon-sets/ic/face.html (for "face" icon, where you can see usage)

[andrey-helldar]

@denunv, thank you!

I'm updated PR #898

[andrey-helldar]

@cyberalien,
Does this package upload a JS file to the site and that's it?
Does it not save local copies of icon files?

In the Russian Federation, RosKomNadzor often blocks access to various IP addresses, trying to block access to Telegram. This can cause the inaccessibility of the destination server with icons, so it is extremely important to store them locally on the site.
Package can it?

I think it would be correct to ask a question in the package repository: iconify/iconify#2

[RoelN]

It's also possible to use the codepoints directly, e.g. as listed here: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints This would work around the ligature text problem. Also @denunv's solution is a good workaround. So I'm closing this issue because I believe it has been addressed. If not, feel free to reopen this issue or create a new one with more information!