Avatar

The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape. By default it is circular, but it can also be square or have a border-radius applied to give rounded corners to the square shape.

It is often used with other components in their slots.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QAvatar'
    ]
  }
}

Usage

TIP

The size property will determine the height and the width of the Avatar. The font-size property will set the size of the font used within the Avatar, which will have an effect on the size of letters and icons.

Basic



Standard sizes



Square



Rounded



With other components



QAvatar API