Vuetify: Avatar images used inside buttons should have the same size as buttons

[wernerm]

Steps to reproduce

Use <v-avatar inside a <v-btn icon> to create an avatar button:

<v-btn icon>
  <v-avatar>
    <img src="https://randomuser.me/api/portraits/men/1.jpg">
  </v-avatar>
</v-btn>          

Versions

Vuetify 0.14

What is expected ?

The avatar's image should be the same size as that of the buttons.

What is actually happening ?

The icon buttons are sized 36px by 36px, but the avatar image is sized 40px by 40px - so the avatar images appears too large when compared to other buttons (on the toolbar).

Reproduction Link

https://codepen.io/wernerm/pen/OjxpOK

_Please Note_ that the codepen's stylesheet contains styles to change the avatar image size.

[johnleider]

As of 0.14.9 you can just assign the image size as the explicit height/width declaration of images inside of avatars was moved to only be within lists.

[johnleider]

And it appears that change didn't make it in for latest release.

[johnleider]

This should be fixed now, https://codepen.io/johnjleider/pen/veBWxJ

[ShadowD]

Check this example:
https://codepen.io/anon/pen/WMoybE

Overlay has wrong dimensions - to height and to narrow.

[nekosaur]

That is a completely separate problem. Please use the issue creator to create a new issue, do not comment on unrelated and closed issues.

[Heunsig]

I think you can use like this

<v-btn fab icon>
    <v-avatar
        size="45"
     >
         // image
     </v-avatar>
</v-btn>

fab and icon attributes in v-btn tag

[esynaps]

You can also do this:

<v-btn icon width="auto" height="auto"  class="pa-1" style="border: 2px solid #a9dff1;">
        <v-avatar size="70">
         // image
        </v-avatar>
        </v-btn>