使用Material Design时如何阻止慢网络下显示图标回退文本？

API 探路者

2026-5-21

Hey there! Let's tackle this annoying issue where Material Design's toggle icon shows the fallback text keyboard_arrow_down when the network is spotty. Here are a few solid, actionable solutions you can try:

Solution 1: Hide Fallback Text with CSS

This is the quickest fix—we can force the text to be visually hidden without affecting accessibility. Most Material Design font icons wrap the text in a class like .material-icons; target that with these styles:

.material-icons {
  text-indent: -9999px;
  overflow: hidden;
  width: 24px; /* Match your icon size */
  height: 24px;
}

If you're using a framework-specific component (like Angular Material's mat-select arrow), narrow the selector to avoid affecting other icons:

.mat-select-arrow-wrapper .material-icons {
  text-indent: -9999px;
  overflow: hidden;
}

Solution 2: Set Empty Fallback Content

Many Material Design components let you override the fallback text directly. For example, with Angular Material's mat-icon:

<!-- Instead of this -->
<mat-icon>keyboard_arrow_down</mat-icon>

<!-- Use this to set an empty fallback -->
<mat-icon aria-label="Toggle dropdown menu"></mat-icon>

If your component supports a fallback attribute, you can set it to an empty string:

<mat-icon fallback="">keyboard_arrow_down</mat-icon>

This way, even if the icon fails to load, there's no text to display.

Solution 3: Preload the Material Icons Font

The root issue is often that the font file hasn't loaded yet when the page renders. Preloading the font tells the browser to prioritize it, reducing the chance of text flashing:

<head>
  <!-- Add this preload tag (update the path to match your font file) -->
  <link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin>
</head>

Solution 4: Switch to SVG Icons (Long-Term Fix)

Font icons rely on external font files—SVG icons are embedded directly in your code, so they never have fallback text issues. Grab the SVG for keyboard_arrow_down from the Material Design library and use it directly:

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#000">
  <path d="M7 10l5 5 5-5z"/>
</svg>

This gives you full control over the icon's appearance without relying on network-dependent font files.

Pick the solution that fits your project setup best—CSS is great for quick fixes, while SVGs offer the most reliability long-term.

内容的提问来源于stack exchange，提问作者Kiran k g