Logo
Hi, Sean S

Size 

<v-row justify="space-around">

  <v-avatar color="indigo" size="36">
    <span class="white--text headline">36</span>
  </v-avatar>

  <v-avatar color="teal" size="48">
    <span class="white--text headline">48</span>
  </v-avatar>

  <v-avatar color="orange" size="62">
    <span class="white--text headline">62</span>
  </v-avatar>

</v-row>

The size prop allows you to define the height and width of v-avatar. This prop scales both evenly with an aspect ratio of 1. height and width props will override this prop.

36
48
62

Profile Card 

<v-card
  class="mx-auto"
  max-width="434"
  tile
>
  <v-img
    height="100%"
    src="/media/stock-600x400/img-32.jpg"
  >
    <v-row
      align="end"
      class="fill-height"
    >
      <v-col
        align-self="start"
        class="pa-0"
        cols="12"
      >
        <v-avatar
          class="profile"
          color="grey"
          size="164"
          tile
        >
          <v-img src="/media/users/300_21.jpg"></v-img>
        </v-avatar>
      </v-col>
      <v-col class="py-0">
        <v-list-item
          color="rgba(0, 0, 0, .4)"
          dark
        >
          <v-list-item-content>
            <v-list-item-title class="title">Sarah Obrien</v-list-item-title>
            <v-list-item-subtitle>Network Engineer</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-col>
    </v-row>
  </v-img>
</v-card>

Using the tile prop, we can create a sleek hard-lined profile card.

Marcus Obrien
Network Engineer

Default slot 

<v-row justify="space-around">

  <v-avatar color="indigo">
    <v-icon dark>mdi-account-circle</v-icon>
  </v-avatar>

  <v-avatar>
    <img
      src="/media/users/100_4.jpg"
      alt="Sean"
    >
  </v-avatar>

  <v-avatar color="red">
    <span class="white--text headline">CJ</span>
  </v-avatar>

</v-row>

The v-avatar default slot will accept the v-icon component, an image, or text. Mix and match these with other props to create something unique.

Sean
CJ

Advanced usage 

<v-container fluid>
  <v-row justify="center">
    <v-subheader>Today</v-subheader>

    <v-expansion-panels popout>
      <v-expansion-panel
        v-for="(message, i) in messages"
        :key="i"
        hide-actions
      >
        <v-expansion-panel-header>
          <v-row
            align="center"
            class="spacer"
            no-gutters
          >
            <v-col
              cols="4"
              sm="2"
              md="1"
            >
              <v-avatar
                size="36px"
              >
                <img
                  v-if="message.avatar"
                  alt="Avatar"
                  src="https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"
                >
                <v-icon
                  v-else
                  :color="message.color"
                  v-text="message.icon"
                ></v-icon>
              </v-avatar>
            </v-col>

            <v-col
              class="hidden-xs-only"
              sm="5"
              md="3"
            >
              <strong v-html="message.name"></strong>
              <span
                v-if="message.total"
                class="grey--text"
              >
                &nbsp;({{ message.total }})
              </span>
            </v-col>

            <v-col
              class="text-no-wrap"
              cols="5"
              sm="3"
            >
              <v-chip
                v-if="message.new"
                :color="`${message.color} lighten-4`"
                class="ml-0 mr-2 black--text"
                label
                small
              >
                {{ message.new }} new
              </v-chip>
              <strong v-html="message.title"></strong>
            </v-col>

            <v-col
              v-if="message.excerpt"
              class="grey--text text-truncate hidden-sm-and-down"
            >
              &mdash;
              {{ message.excerpt }}
            </v-col>
          </v-row>
        </v-expansion-panel-header>

        <v-expansion-panel-content>
          <v-divider></v-divider>
          <v-card-text v-text="lorem"></v-card-text>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-row>
</v-container>

Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.

Today