<div id="app">
      <v-app id="inspire">
        <v-row no-gutters>
          <v-col>
            <div class="title">DEFAULT BUTTON</div>
            <v-btn>
              <v-icon color="primary">mdi-pencil</v-icon>
            </v-btn>

            <v-sheet color="grey lighten-4 pa-3 mt-2" width="220">
              <ul>
                <li>Not square</li>
                <li>Has grey ripple-effect</li>
                <li>Has grey hover effect</li>
              </ul>
            </v-sheet>
          </v-col>

          <v-col id="result">
            <div class="title">WHAT WE WANT</div>
            <v-btn v-ripple="{ class: 'primary--text' }">
              <v-icon color="primary">mdi-pencil</v-icon>
            </v-btn>
            <v-sheet color="grey lighten-4 pa-3 mt-2" width="250">
              <ul>
                <li>Square</li>
                <li>Has a colored ripple-effect</li>
                <li>No grey hover effect</li>
                <li>Icon scale hover effect</li>
              </ul>
            </v-sheet>
          </v-col>
        </v-row>
      </v-app>
    </div>

/* setting min-width is necessary for the width to work */
#result .v-btn {
  min-width: 36px;
  width: 36px;
}
/* removes grey hover effect */
#result .v-btn::before{
  background-color: transparent;
}

/* adds icon scale hover effect */
#result .v-btn i:hover{
  transform: scale(1.15);
}

#app {
  margin: 10px 50px
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})