Using a v-list and v-icon in vutify - Why is my icon colour not working please-CodePudding

I am trying to store my icon colours as a data item but for some reason they are not being picked up. If I add a static colour color="red" for example works fine but below doesn't, can anyone explain why please as I can't figure it out

thanks

Gibbo

<v-list>
    <v-list-item
      v-for="(item, i) in items"
      :key="i"
      :to="item.to"
      router
      exact
    >
      <v-list-item-action>
        **<v-icon :color="item.color">{{ item.icon }}</v-icon>**
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title v-text="item.title" />
      </v-list-item-content>
    </v-list-item>
  </v-list>

And my data items are

items: [
        {
          icon: 'mdi-apps',
          title: 'Home',
          to: '/',
          color: 'White'
        },
        {
          icon: 'mdi-note-text-outline',
          title: 'Overview',
          to: '/overview',
          color: 'Blue'
        },

CodePudding user response：

The colors in vuetify have lowercase format :

items: [
        {
          icon: 'mdi-apps',
          title: 'Home',
          to: '/',
          color: 'white'
        },
        {
          icon: 'mdi-note-text-outline',
          title: 'Overview',
          to: '/overview',
          color: 'blue'
        },