如何为Material Icon（@mui/icons-material图标）设置自定义文本？

你通过import FiberNewIcon from "@mui/icons-material/FiberNew";引入的Material UI图标支持自定义文本配置，根据使用场景分为两种实现方案：

• 仅需要无障碍识别文本（视觉不显示）
  直接给图标组件添加aria-label属性即可，屏幕阅读器会识别该内容，普通用户视觉上看不到任何文本：
  示例代码：
  <FiberNewIcon aria-label="新内容标识" />
• 需要视觉上展示和图标绑定的自定义文本
  预定义的MUI图标本质是纯SVG矢量图形，内部没有内置文本节点，无法直接在图标内部添加显示文本，可通过布局组件将图标和文本组件组合实现效果，示例代码如下：

  import FiberNewIcon from "@mui/icons-material/FiberNew";
  import Typography from "@mui/material/Typography";
  import Box from "@mui/material/Box";
  
  function CustomIconWithText() {
    return (
      {/* 横向布局对齐图标和文本 */}
      <Box display="flex" alignItems="center" gap={1}>
        <FiberNewIcon color="primary" fontSize="small" />
        <Typography variant="body2">最新发布</Typography>
      </Box>
    );
  }
  

内容的提问来源于stack exchange，提问作者Peter Penzov