How can I change my [vuetify.js] icon color in v-alert

Am having trouble trying to change the icon color in v-alert .

<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;
        "
        icon="mdi-alert"
        color="orange"
      >
        {{ alertData1 }}
      </v-alert>

You didn't mention which color you want to give to the alert icon.
However, instead of using CSS, you can simply use the dark prop which will make the text and icon both white.

Working demo-

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      alert1: true,
      alertData1: "My Alert"
    }
  }
})

<!-- language: lang-html -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-alert
        v-model="alert1"
        dismissible
        dark
        width="300px"
        style="
          position: fixed;
          left: 10%;
          top: 50px;
          margin: 0 auto;
          z-index: 1000001 !important;
        "
        icon="mdi-alert"
        color="orange"
      >
        {{ alertData1 }}
      </v-alert>

  </v-app>
</div>

<!-- end snippet -->

And if you want to give a specific color to the warning icon only then you can use custom CSS. For example-

.mdi-alert {
  color: red !important;
}

Working demo-

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      alert1: true,
      alertData1: "My Alert"
    }
  }
})

<!-- language: lang-css -->

.mdi-alert {
  color: red !important;
}

<!-- language: lang-html -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-alert
        v-model="alert1"
        dismissible
        dark
        width="300px"
        style="
          position: fixed;
          left: 10%;
          top: 50px;
          margin: 0 auto;
          z-index: 1000001 !important;
        "
        icon="mdi-alert"
        color="orange"
      >
        {{ alertData1 }}
      </v-alert>

  </v-app>
</div>

<!-- end snippet -->