Vue Material -

Avatar

Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand. They also can be a placeholder when there is no image to be shown, showing a initial letter of a name on contacts that have no picture yet, for example.

Avatar

Avatars can show a single image by default but can also display an icon (using the md-icon component):

Default

API - md-avatar

The following option can be applied to any avatar:

NameDescription
md-avatar-icon Creates a avatar that can show a icon.

Initial letter as a placeholder

Let's assume that you want to show a list of contacts, but some of them do not have a picture in your database. You can use the initial letter of the contact name as a placeholder. It can even show 2 letters (for compound names) without problems:

Placeholder

Multiple sizes

You can specify three different sizes, if you want: Regular, Small or Large. By default the avatar have a regular size.

Sizes

API - md-avatar

The following options will change the size of a avatar:

NameDescription
md-small Makes a small avatar, changing the size of image, icon or text.
md-large Makes a large avatar. Commonly used as the current user avatar inside a left md-drawer.