Angular v11中Mat-icon不跟随页面RTL方向的问题求助

核心问题是Google字体提供的.material-icons类硬编码了direction: ltr，阻断了CSS方向的继承。以下是规范且简洁的解决方式：

全局样式覆盖（推荐） #

在你的全局样式文件（比如styles.css）中添加以下代码：

.material-icons {
  direction: inherit;
}

如果原样式的优先级较高，可以用!important确保生效：

.material-icons {
  direction: inherit !important;
}

原理说明 #

• inherit关键字会让图标元素直接继承父级元素的direction属性值，无论是父容器、body还是html标签设置的rtl，图标都会自动适配。
• 这种方式不需要给每个Mat-icon手动添加自定义类，完全符合CSS继承的设计规范，也避免了繁琐的逐个元素调整。

优先级优化（可选） #

如果不想使用!important，可以通过提升选择器优先级来覆盖原样式：

html .material-icons,
body .material-icons {
  direction: inherit;
}

这种写法利用了html/body的层级权重，无需强制优先级即可覆盖CDN加载的默认样式。

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