当谷歌的JS无法将它们转换为图标时，如何防止材料图标文本显示？
图标在标记中定义如下：
<span class="material-icons">icon_name</span>
示例：https://archive.fo/CKqKG/scr.png(请参阅按钮的顶行)。
材质图标文档：https://material.io/icons/
这也是谷歌搜索中的一个问题，谷歌实际上会阅读和保存div的文本，而不是忽略它。
示例：https://i.stack.imgur.com/dKH1e.png
我知道一种解决方案是简单地切换到.PNG(由谷歌提供)。我想做任何导致用户系统上(网络)负载减少的事情。
谢谢！
你可以使用font-display: block;，只需将这个CSS添加到你的HTML头上：
<style>
@font-face {
font-family: 'Material Icons';
font-display: block;
}
</style>
欲了解更多信息，字体显示
我一直在为类似的情况而苦苦挣扎：我的问题不是图标从未加载过，只是它们可能需要一段时间才能在较慢的连接上加载，直到它们加载丑陋的、无格式的文本，如sentiment_very_satisfied将显示在页面上(通常比周围的文本大很多倍，也使其非常明显)。
这里的其他解决方案对我不起作用(包括我认为可能很有前途的font-display:block)，所以我想出了自己的CSS和jQuery。我相信你可以很容易地调整它以使用香草JS。
.CSS：
.material-icons{
opacity:0;
}
j查询：
$(window).load(function() {
$('.material-icons').css('opacity','1');
});
这里的诀窍是，与更常用的$(document).ready()侦听器不同，$(window).load()在触发之前等待页面的所有元素被下载。在这种情况下，这意味着在下载图标字体之前，它不会更改图标的不透明度。
缺点是，在下载页面上的所有内容之前，图标不会显示，但这是我愿意做出的权衡，以避免在加载图标字体之前在我的页面上显示大量文本。
(我还在 CSS.material-icons{transition:opacity 0.5s;}中添加了一个过渡，因此它们看起来既漂亮又流畅。
如果您使用的是Typekit的Web字体加载器，则可以应用条件类在Web字体加载或加载失败时隐藏图标，例如：
.wf-loading, .wf-materialicons-n4-inactive {
.material-icons {
display: none;
}
}
当然，您可以根据自己的喜好应用其他样式技术以获得最佳效果，例如font-size: 0;，这将取决于您的网站和用例。
要使用 webfont 加载器加载材质图标，请使用如下配置：
window.WebFontConfig = {
google: {
families: [
'Material Icons',
],
},
};
在你的"index.html"中，你应该有指向谷歌材料图标的链接。在此链接中，您必须在末尾包含："&display=block"。我告诉你它的结果是怎样的：
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?
family=Material+Icons&display=block"
crossorigin
/>
如果您现在转到链接，您将看到该文档包括："字体显示：块;"(您已更改"显示")。
仅此而已。图标的名称不会看到更多，图标将正确充电！
我遇到了同样的问题。不过，我相信使用像i.material-icons：before这样的伪选择器会有所帮助。有关详细信息，请参阅此处。
----编辑：工作示例
i.material-icons:before{display:none;}
正确的解决方案是添加相同字体大小的最大宽度，并将溢出设置为隐藏。
.material-icons {
max-width: 16px;
overflow: hidden;
}
我曾经有同样的问题(TOC)，直到我发现IcoMoon可以帮助您创建一个css文件，其中包含您选择的每个材料图标的类名标识符，并且还将图标创建为符号SVG。
让我们通过一个例子来了解这一点。
谷歌字体方式 (FOUC)
<span class="material-icons">
search
</span>此代码在加载图标字体时显示搜索词。但是，通过很好地使用缓存，预连接，预加载和显示块，希望没有人会注意它。
IcoMoon way (使用字体)
<span class="icon-search"></span>在这里，您可以注意到没有 FOUC 的可能性，因为没有要显示的默认文本。
.icon-search:before {
content: "e900";
}<小时 />有了这个额外的类，它将保留一个空白空间，直到加载源。
IcoMoon方式(使用SVG符号)
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path>
</symbol>
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>使用此技术，无需等待字体加载。但是，如果您有大量图标，HTML 大小会更大，并且可能不太易于维护。
最后，如果您担心项目的加载时间，您会很高兴知道使用此工具(IcoMoon)您只加载您使用的图标(天哪，这看起来像一个商业广告)。无论如何，以下是要遵循的步骤：
- 转到 https://icomoon.io/app/#/select/library，然后使用">+ 添加"按钮选择"材料"图标。
- 现在选择您将要使用的图标。
- 最后，在底部选择选项 生成字体or生成SVG。
您将拥有一个包含 css 和字体的 zip 文件，您可以包含在项目中或要包含在 HTML 中的 SVG 路径中。
一些额外的参考阅读：
- CSS技巧
如果您使用的是angularjs，则修复可能是
<i class="material-icons-outlined" ng-bind-html=" 'icon_text' "></i>
或者如果你使用的是jQuery，那么
.HTML
<i material-icons="icon_text" class="material-icons"></i>
jQuery.onLoad
$('[material-icons]').each(function(){
var icon_text = $(this).attr('material-icons');
$(this).html(icon_text)
});
页面加载后将显示图标。
而不是使用材质图标全文，您可以使用其相应的十六进制代码点。 当然，这不是隐藏，但是如果未加载字体，则只会显示未知的字符符号。
例：
<i class="material-icons"></i>
您可以在以下位置找到代码点列表：
https://github.com/google/material-design-icons/issues/813#issuecomment-401601344
或
https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/material/icons.dart
不是修复程序，但在支持预连接的浏览器上，您可以尝试尽快加载字体。应该有助于减少在慢速连接上显示文本和图标之间的时间。
<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
我发现如果您在链接标签的 href 末尾插入 -&display=swap会有所帮助，如下所示：
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
rel="stylesheet"
>这是供参考的链接
这是我设法最小化此问题的方法。但请注意，它仅适用于Chrome和Edge，否则它将回退到通常的行为。通过使用document.fonts.onloaddone，我检查我想要的字体是否已加载。如果它被加载，我会创建一个类，它将类"材料图标"的不透明度变为 1，最初在 css 中设置为 0。
在css文件上，我编写了此规则(该规则将被最终将在脚本中定义的类覆盖)
.material-icons { opacity: 0 };
我在索引 html 页面中添加了一个脚本标记。
<script>
// This executes on chrome and EDGE only as tested
document.fonts.onloadingdone = function (fontFaceSetEvent) {
// console.log(fontFaceSetEvent.fontfaces) to see the available fonts which have been loaded
// and change the font family name according to your font family requirement
const fontName = 'Material Icons';
if (fontFaceSetEvent.fontfaces.filter(i => i.family === fontName).length > 0) {
addMakeIconsVisibleClass();
}
};
// Fallback - call below function if not chrome (or EDGE)
if (navigator.userAgent.toLowerCase().indexOf('chrome') === -1) {
addMakeIconsVisibleClass();
}
function addMakeIconsVisibleClass() {
let style = document.createElement('style');
style.innerHTML = '.material-icons { opacity: 1 !important }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
我们可以先使用 css 将图标的透明度归零，然后在 3 秒后使用addClass显示图标。
var delayInMilliseconds = 3000;
setTimeout(function() {
var element = document.getElementById("mayicons");
element.className +="ops1";
}, delayInMilliseconds);.material-icons {
width: 26px;
height: 30px;
overflow: hidden;
opacity: 0;
}
.ops1{
opacity: 1;
}<i id="mayicons" class="material-icons ">list</i>结合几个很好的建议，我决定采用这个解决方案：设置display:none，稍后将其替换为页面加载处理程序中的display:inline-block。为了避免布局偏移，我添加了已知的图标高度，在我的例子中是height:64px。
相关风格：
.material-icons-round {
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: none; /* will be replaced once font has loaded */
transition: opacity 0.24s ease-in-out;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
width: 21px;
}
用法(姜戈模板)：
<div class="my-card">
<a href="#" onclick="{{ onclick }}">
<div class="my-card-content center-align">
<div class="my-card-title">{{ title }}</div>
<div style="margin-bottom:8px; height:64px">
<i class="notranslate material-icons-round medium">{{ icon }}</i>
</div>
<div>{{ text }}</div>
</div>
</a>
</div>
页面加载处理程序：
window.addEventListener("load", function()
{
// the fonts have been fully loaded, so show the icons
const icons = document.getElementsByClassName('material-icons-round')
Array.from(icons).forEach(icon => {
icon.style.display = 'inline-block'
});
});
创建一个div 样式 ="位置：绝对;顶部：-1000px"，然后输入所有带有类材料图标或真棒字体的项目，如下所示：
<div style="position:absolute;top:-1000px" >
<i class="icon material-icons-outlined" >add_circle</i>
<i class="icon material-icons " >list_alt</i>
<span class="fas fa-circle fa-stack-2x " ></span>
<span class="fas fa-home fa-stack-1x fa-inverse" ></span>
</div>