fix(vicon.ts): svg size didn't match default icon size

[rachael-smith]

default font size was 24 but svg size was set to 32 making alignment for svgs off if not specified

Description

default font size was 24 but svg size was set to 32 making alignment for svgs off if not specified
resolves bug report #10480

Motivation and Context

fixes #10480

How Has This Been Tested?

went through snapshot test and tested locally by testing default and changing size in v-icon tag

Markup:

can throw this in playground https://codepen.io/myleslee/pen/OJVJRwB?editors=1010 (also pasted below)

<template>
  <v-container>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>

          <v-col cols="12" sm="6">
            <v-text-field v-model="message1" label="Regular" clearable append-icon="event">
              <template v-slot:prepend>
                <v-icon>event</v-icon>
              </template>
              <template v-slot:prepend-inner>
                <v-icon @click="alert('a')">
                  M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z
                </v-icon>
              </template>
              <template v-slot:append-outer>
                <v-icon @click="alert('a')">
                  clear
                </v-icon>
              </template>
            </v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      message1: 'icons in lower position are svgs',
      message2: 'Hey!',
      message3: 'Hey!',
      message4: 'Hey!',
    }
  }, methods: {
    alert(val) {
      alert(val)
    }
  }
}
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[rachael-smith]

same as #10497 just cleaned up

[rachael-smith]

updated vchip which was also having the same issue as pointed out by @funkybg

[KaelWD]

More playground:

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-text-field v-model="message1" label="Regular" clearable append-icon="event">
          <template v-slot:prepend>
            <v-icon>event</v-icon>
          </template>
          <template v-slot:prepend-inner>
            <v-icon @click="alert('a')">
              M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z
            </v-icon>
          </template>
          <template v-slot:append-outer>
            <v-icon @click="alert('a')">
              clear
            </v-icon>
          </template>
        </v-text-field>
      </v-col>

      <v-col cols="12">
        <v-chip close>I'm a chip</v-chip>
      </v-col>

      <v-col cols="12">
        <v-card width="400" class="mx-auto mt-6">
          <v-toolbar color="deep-purple accent-4" dark>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>New Chat</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>{{ mdiMagnify }}</v-icon>
            </v-btn>
          </v-toolbar>

          <v-list subheader>
            <v-subheader>Recent chat</v-subheader>

            <v-list-item @click.stop>
              <v-list-item-icon>
                <v-icon color="deep-purple accent-4">{{ mdiMessage }}</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title>Jason Oner</v-list-item-title>
              </v-list-item-content>

              <v-list-item-icon>
                <v-icon @click.stop>{{ mdiClose }}</v-icon>
              </v-list-item-icon>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  import { mdiMessage, mdiClose, mdiMagnify } from "@mdi/js";

  export default {
    data () {
      return {
        message1: 'icons in lower position are svgs',
        message2: 'Hey!',
        message3: 'Hey!',
        message4: 'Hey!',
        mdiMessage,
        mdiClose,
        mdiMagnify
      }
    },
    methods: {
      alert(val) {
        alert(val)
      }
    }
  }
</script>

[rachael-smith]

@KaelWD should be good now

[rachael-smith]

@KaelWD should be good