Goggle translate destroying material-icons <i> tags

[NathanielHill]

Sorry if I'm not doing this correctly, but I just joined GitHub to submit this issue! I'm using MDL for the first time on a new site and discovered some major problems when users use google translate to translate the page. Google translate replaces any text with it's translated version and surrounds it with double tags. First I thought the font tags where the problem, then I realized it's translating the icon label withing the tag, so MDL now has no idea which icon you want and it seems like the tags additionally mess with the layout. I'm working around the problem by adding the class "notranslate" to the tags which does seem to work, but it doesn't fix the problem for the "hamburger" drawer icon since that is injected by the JS. Is there a way to work around this so it's fixed out of the box for MDL? Seems like a big issue and unfortunate if the answer is that everyone has to had class="notranslate" to every tag. Also, any ideas on how to fix the hamburger icon?

[NathanielHill]

I've solved my drawer icon problem by adding the "notranslate" class to my

. This doesn't seem ideal, I just happen to not have any content in the header that I want to be translated.

[surma]

That is... interesting! Thanks for the issue, @NathanielHill. I think we haven’t really ever considered Google Translate a use-case. We will look into this, but please understand that this a) will probably involve breaking changed and can’t be addressed before v2 b) is not going to get a high priority.

[NathanielHill]

Yes, thanks for the quick response. At the moment I am simply applying the "notranslate" class to my entire header, which wouldn't work if there was content that should be subject to translation (for me just my business name which I don't want translated). It does seem like a use case that should be considered as Google Translate is pretty pervasive in some markets. In Central America most people have androids and have chrome setup to auto-translate. Seems like a pretty simple fix, for example just have the JS apply the "notranslate" class to all elements that already are "material-icons"; possibly it could even apply the class only when it detects googles translation JS - but that is beyond my expertise. I'm far from a JavaScript expert, but would the team consider a small change like that if I wrote it?

[Garbee]

@surma Wouldn't changing this menu declaration in the layout js to  solve the translation issue upstream? Since then we are using the non-ligature icon reference.

Sounds like something we should do across every internal icon usage. Then get the upstream Material Icon documentation to inform developers about this issue when using ligatures.

[surma]

@Garbee I’m pretty sure that would solve it, yeah.

Our markup seems to break in general when being piped through translate. Haven’t spent any time investigating, though.

[Garbee]

@surma Might be specific to how Translate is rendering things... Hard for me to tell what is going on. Nothing jumps out as a problem. Maybe just issues when rendering through an iframe...

[NathanielHill]

@Garbee So, looks like you're saying to use a unicode character to reference the icon instead? Is there a list somewhere where you can see the characters and icons associated with them? This seems like it would fix the problem, and I would be willing to test it.

[surma]

Yes, all the icons have both a ligature and a unicode code point.

Find your icon on the Material Icons site, and choose “Icon Font” in the bottom sheet :)

[Garbee]

You can also check out the codepoints file in the repository. That is where I get mine from.

[Garbee]

Commit 04beffae2116690189e7443b12bb37113cd15cfa solves the menu icon being translated by using the codepoint.

Either using notranslate with ligatures or the codepoints solves the problem, at least with icons.

For other Translate issues... Probably best to wait for 2.x when we refactor loads of stuff including layout. We can clearly see layout and possibly grid are completely screwed in translate, but for no apparent reason. Rather than spend time debugging this now we should do testing ahead of releasing 2.x to make sure it works better in these cases.

Marking this as a 2.x milestone thing as a reminder.

[sgomes]

Google Translate and similar services essentially rewrite a page's HTML, and it's IMO a bad idea to try to code defensively against it at the library level; if we were to fully support all translate / page modifying services we'd presumably end up with a bunch of hacks all over the code.

We'll switch to codepoints wherever possible inside the library itself, however!

[Garbee]

Yea, internally using codepoints along with providing developers as much markup control as we can in V2 will solve this.

[BrianIto]

So the best approach is to use notranslate in all the material icons?

[sntgchns]

Yes, so far it works... Just add notraslate to material-icon class

[ImmediateMurderProfessionals]

goggle translate 💀