Fixing the ligatures curse with translate attribute

Use the translate attribute set to "no" to stop Google translate from trying to translate the ligature of your icon, and end up with readable text, instead of a nice icon.

<i class="icon" tranlsate="no">trash</i>

If you've ever used ligatures to define your icons in an icon font, or a ready made icon font with ligatures defined, like Google Material Icons font, then you must faced issues with multi-lingual interfaces.

If you control the languages, then you can always

• Display the icon text with one language, and toss it under the rug (no considerations for accessibility, which can be dealt with using aria- and title attributes).
• Or you can add all possible ligatures to the icon when you create your font (with tools like icomoon), this is accessible alright, but bloats the icon font file.

But if your audience try to translate page using Google translate, your options are slimmer. The icon will appear as text. And well translated. That, might not be what you aim for. So translate="no" is the the best visual solution. Of course, for data integrity, you can simply let it be.

RESOURCES

• HTML translate on MDN