如何修改Vuetify.js中v-alert组件的图标颜色？

• 使用插槽自定义图标（最直接）
  放弃组件自带的icon属性，通过icon插槽手动添加图标，完全控制图标的样式：

  <v-alert
    v-model="alert1"
    dismissible
    width="300px"
    style="
      position: fixed;
      left: 50%;
      bottom: 50px;
      transform: translate(-50%, -50%);
      margin: 0 auto;
      z-index: 1000001 !important;
      color:white;
    "
    color="orange"
  >
    <template v-slot:icon>
      <v-icon color="white">mdi-alert</v-icon>
    </template>
    {{ alertData1 }}
  </v-alert>
  

  直接给<v-icon>设置color属性，就能指定图标颜色，不受组件默认样式限制。

• 通过深度选择器覆盖默认样式
  不想改动结构的话，在scoped样式中用深度选择器选中内部图标元素，强制修改颜色：

  ::v-deep .v-alert__icon .v-icon {
    color: white !important;
  }
  

  若样式未加scoped，可去掉::v-deep直接写选择器：

  .v-alert__icon .v-icon {
    color: white !important;
  }
  

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