Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Import this Component Individually#

You can get more detail here.

import { NzAvatarModule } from 'ng-zorro-antd/avatar';

Examples

Three sizes and two shapes are available.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-avatar-basic',
  template: `
    <div>
      <nz-avatar [nzSize]="64" nzIcon="user"></nz-avatar>
      <nz-avatar nzSize="large" nzIcon="user"></nz-avatar>
      <nz-avatar nzIcon="user"></nz-avatar>
      <nz-avatar nzSize="small" nzIcon="user"></nz-avatar>
    </div>
    <div>
      <nz-avatar [nzShape]="'square'" [nzSize]="64" [nzIcon]="'user'"></nz-avatar>
      <nz-avatar [nzShape]="'square'" [nzSize]="'large'" [nzIcon]="'user'"></nz-avatar>
      <nz-avatar [nzShape]="'square'" [nzIcon]="'user'"></nz-avatar>
      <nz-avatar [nzShape]="'square'" [nzSize]="'small'" [nzIcon]="'user'"></nz-avatar>
    </div>
  `,
  styles: [
    `
      nz-avatar {
        margin-top: 16px;
        margin-right: 16px;
      }
    `
  ]
})
export class NzDemoAvatarBasicComponent {}
Edward

For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.

expand codeexpand code
import { Component } from '@angular/core';

const userList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];

@Component({
  selector: 'nz-demo-avatar-dynamic',
  template: `
    <nz-avatar
      [nzText]="text"
      nzSize="large"
      [ngStyle]="{ 'background-color': color }"
      style="vertical-align: middle;"
    ></nz-avatar>
    <button nz-button [nzType]="'dashed'" (click)="change()" style="margin-left: 16px; vertical-align: middle;">
      <span>Change</span>
    </button>
  `
})
export class NzDemoAvatarDynamicComponent {
  text: string = userList[3];
  color: string = colorList[3];

  change(): void {
    let idx = userList.indexOf(this.text);
    ++idx;
    if (idx === userList.length) idx = 0;
    this.text = userList[idx];
    this.color = colorList[idx];
  }
}
UUSERU

Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-avatar-type',
  template: `
    <nz-avatar nzIcon="user"></nz-avatar>
    <nz-avatar nzText="U"></nz-avatar>
    <nz-avatar nzText="USER"></nz-avatar>
    <nz-avatar nzIcon="user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    <nz-avatar nzText="U" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
    <nz-avatar nzIcon="user" style="background-color:#87d068;"></nz-avatar>
  `,
  styles: [
    `
      nz-avatar {
        margin-top: 16px;
        margin-right: 16px;
      }
    `
  ]
})
export class NzDemoAvatarTypeComponent {}

0

1

2

3

4

5

6

7

8

9

Usually used for messages remind.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-avatar-badge',
  template: `
    <nz-badge [nzCount]="5" style="margin-right: 24px;">
      <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
    </nz-badge>
    <nz-badge nzDot>
      <nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
    </nz-badge>
  `
})
export class NzDemoAvatarBadgeComponent {}

API#

nz-avatar#

PropertyDescriptionTypeDefault
[nzIcon]the Icon type for an icon avatar, see Iconstring-
[nzShape]the shape of avatar'circle' | 'square''circle'
[nzSize]the size of the avatar'large' | 'small' | 'default' | number'default'
[nzSrc]the address of the image for an image avatarstring-
[nzSrcSet]a list of sources to use for different screen resolutionsstring-
[nzAlt]This attribute defines the alternative text describing the imagestring-
[nzText]letter type avatarstring-