如何为Material UI的Symbol图标设置FILL填充样式？

核心原理 #

Material Symbols的填充效果由CSS属性font-variation-settings控制，需设置'FILL' 1启用填充样式，而非SVG的fill属性。

解决方案 #

1. 全局配置所有图标为填充样式 #

在theme.js中修改MuiIcon的styleOverrides，添加字体变量设置：

// theme.js
export const theme = createTheme({
  components: {
    MuiIcon: {
      defaultProps: { 
        baseClassName: 'material-symbols-rounded' 
      },
      styleOverrides: {
        root: {
          fontVariationSettings: "'FILL' 1",
          // 可选：可同时调整权重、光学尺寸等参数
          // fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24"
        }
      }
    },
    MuiIconButton: {
      defaultProps: { 
        className: 'material-symbols-rounded' 
      }
    }
  }
});

2. 为单个图标单独设置填充样式 #

方式一：通过sx属性直接设置

<Icon sx={{ fontVariationSettings: "'FILL' 1" }}>home</Icon>

方式二：自定义类名复用样式

先在全局CSS中定义类：

.material-symbols-rounded.fill {
  font-variation-settings: "'FILL' 1";
}

再在组件中引用：

<Icon className="fill">home</Icon>

3. 封装可复用的填充图标组件 #

若频繁使用填充图标，可封装组件简化代码：

// FilledIcon.jsx
import { Icon } from '@mui/material';

const FilledIcon = (props) => {
  return (
    <Icon 
      {...props}
      sx={{
        fontVariationSettings: "'FILL' 1",
        ...props.sx
      }}
    />
  );
};

export default FilledIcon;

使用示例：

<FilledIcon>favorite</FilledIcon>

无效原因说明 #

此前尝试的常规style或styleOverride不生效，是因为Symbol字体图标的填充不依赖SVG的fill属性，而是必须通过字体变量font-variation-settings控制。

内容的提问来源于stack exchange，提问作者Kevin Garcia