fix: adjust alignment for prepend/append icons

[johnleider]

Description

Motivation and Context

How Has This Been Tested?

Markup:

<template>
  <boilerplate>
    <h2>Regular</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-textarea>
      </v-flex>
      <v-flex>
        <v-checkbox
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-checkbox>
      </v-flex>
      <v-flex>
        <v-switch
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-switch>
      </v-flex>
    </v-layout>
    <h2>Regular single-line</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          single-line
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          single-line
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          single-line
        ></v-textarea>
      </v-flex>
      <v-flex>
        <v-checkbox
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-checkbox>
      </v-flex>
      <v-flex>
        <v-switch
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-switch>
      </v-flex>
    </v-layout>

    <h2>Solo</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          solo
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          solo
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          solo
        ></v-textarea>
      </v-flex>
    </v-layout>

    <h2>Box</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
        ></v-textarea>
      </v-flex>
    </v-layout>

    <h2>Box single-line</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
          single-line
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
          single-line
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          box
          single-line
        ></v-textarea>
      </v-flex>
    </v-layout>

    <h2>Outline</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
        ></v-textarea>
      </v-flex>
    </v-layout>

    <h2>Outline single-line</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
          single-line
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
          single-line
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          outline
          single-line
        ></v-textarea>
      </v-flex>
    </v-layout>

    <h2>Fullwidth</h2>
    <v-layout mb-5>
      <v-flex>
        <v-text-field
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          full-width
        ></v-text-field>
      </v-flex>
      <v-flex>
        <v-select
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          full-width
        ></v-select>
      </v-flex>
      <v-flex>
        <v-textarea
          v-model="message"
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
          full-width
        ></v-textarea>
      </v-flex>
    </v-layout>
    <v-layout class="mb-5">
      <v-flex>
        <v-slider
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-slider>
      </v-flex>
    </v-layout>
    <v-layout class="mb-5">
      <v-flex>
        <v-slider
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-slider>
      </v-flex>
    </v-layout>
    <v-layout class="mb-5">
      <v-flex>
        <v-autocomplete
          prepend-icon="place"
          prepend-inner-icon="place"
          append-icon="place"
          append-outer-icon="place"
        ></v-autocomplete>
      </v-flex>
    </v-layout>
  </boilerplate>
</template>

<script>
  export default {
    data: () => ({
      message: 'Test'
    })
  }
</script>

<style lang="stylus">
.v-input
  border: 1px dashed red

//   &__control
//     border: 1px dashed blue

//   &__slot
//     border: 1px dashed orange

// .v-text-field__slot
//   border: 1px dashed green

input,
textarea
  background-color: lightblue !important

.v-input__icon
  border: 1px dashed blue
.v-input__append-inner,
.v-input__append-outer,
.v-input__prepend-inner,
.v-input__prepend-outer
  // border: 1px solid brown
</style>

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 feature but make 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 breaking 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)

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[codecov]

Codecov Report

Merging #5794 into dev will increase coverage by 0.07%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##              dev    #5794      +/-   ##
==========================================
+ Coverage   88.56%   88.63%   +0.07%     
==========================================
  Files         281      281              
  Lines        6163     6203      +40     
  Branches     1532     1552      +20     
==========================================
+ Hits         5458     5498      +40     
  Misses        587      587              
  Partials      118      118

Impacted Files	Coverage Δ
packages/vuetify/src/components/VImg/VImg.ts	99.03% <0%> (+0.6%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c3c7839...5fefe52. Read the comment docs.

[peluprvi]

You can try using outline instead of border in your playground to keep the size as default.

MD1 Specs:

For clear, voice input and dropdown, MD1 spec vertical align the icon in the middle of the box instead of the middle of the text:

MD2 has completely different measures, spaces, margins and paddings:

But MD2 still centralizing the clear button (and other right buttons) with the box, instead of the text:

[johnleider]

Going to approach this a different direction after inputs are converted to TS starting with: #5852