如何停止v-autocomplete组件中图标的旋转？

<template>
  <v-autocomplete
    v-model="selectedItem"
    :items="items"
    item-text="name"
    item-value="id"
    :loading="isLoading"
  >
    <template v-slot:append-outer>
      <v-icon v-if="isLoading">mdi-loading mdi-spin</v-icon>
      <v-icon v-else>mdi-check</v-icon>
    </template>
  </v-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [],
      isLoading: false
    };
  },
  methods: {
    loadData() {
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        this.items = [
          { id: 1, name: '选项1' },
          { id: 2, name: '选项2' },
          { id: 3, name: '选项3' }
        ];
        this.isLoading = false;
      }, 2000);
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

<style>
/* 停止旋转动画 */
.v-icon.mdi-spin {
  animation: none !important;
}
</style>