Vue Material框架下如何修改md-icon组件的图标颜色

方案1：单个图标临时修改（行内样式） #

直接在组件上添加style属性指定颜色，适合零散调整个别图标颜色的场景：

<md-icon style="color: #ff5722;">list_alt</md-icon>
<!-- 动态绑定颜色的写法 -->
<md-icon :style="{ color: active ? '#00c853' : 'rgba(0,0,0,0.54)' }">list_alt</md-icon>

方案2：自定义样式类覆盖 #

如果需要批量给一类图标改色，可以给组件加自定义类，再写样式覆盖默认规则：

1. 模板中添加类名：

<md-icon class="custom-primary-icon">list_alt</md-icon>

2. 写CSS覆盖，注意权重要和默认规则匹配，如果是单文件组件开启了scoped需要加深度选择器：

/* 全局样式/无scoped时直接写 */
.md-icon.md-theme-default.md-icon-font.custom-primary-icon {
    color: #2196f3;
}

/* Vue2 带scoped时写法 */
::v-deep .custom-primary-icon {
    color: #2196f3;
}

/* Vue3 带scoped时写法 */
:deep(.custom-primary-icon) {
    color: #2196f3;
}

方案3：全局修改默认主题颜色 #

默认样式使用了CSS变量控制颜色，如果要全局修改所有默认主题的md-icon颜色，直接覆盖变量即可：

/* 在全局样式文件中定义 */
:root {
    --md-theme-default-icon-on-background: #333333;
}

如果只需要修改某个父容器下的所有md-icon颜色，把变量定义在对应父元素的样式里即可：

.custom-card-container {
    --md-theme-default-icon-on-background: #ffffff;
}

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