如何获得旧/现代浏览器的 HTML 代码兼容性

Question

我正在为 Cordova Android/iOS 应用程序使用 Material Icons 字体和 AngularJS。

问题是，对于某些 Android 4.X 版本，我必须使用 "old" 方式来显示图标，就像这样（文档中的代码）：

<!-- For modern browsers. -->
<i class="material-icons">arrow_back</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE5C4;</i>

所以现在，我想我必须找到我项目中的每个图标，并通过六位更新图标文本，但在此之前我有一些问题:

问题：

仅使用旧方法 () 显示图标是否安全（或不良做法），即使对于现代浏览器也是如此？现代浏览器是否会在几年内放弃这种兼容性？
有没有好的方法（在AngularJS，纯JS或HTML，如果可能）检测浏览器是否不支持现代方式，然后替换图标文本通过一些六边形 (arrow_back -> )

Answer 1

当我使用十六进制解决方案时，它可以工作，但是当你阅读你的 HTML 时会很痛苦，所以我找到了另一个解决方案：通过类名生成图标。

效果很好，所以如果有人遇到同样的问题，我就创建了一个存储库：material-icons-css

How to get HTML code compatibility for old / modern browsers