Avatar

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

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

Examples

Basic

Three sizes and two shapes are available.

expand codeexpand code
      Loading...
Edward
Autoset Font Size

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
      Loading...
UNGU+2
Avatar Group

Avatar group display.

expand codeexpand code
      Loading...
UUSERU
Type

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

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9

With Badge

Usually used for messages remind.

expand codeexpand code
      Loading...

API#

nz-avatar#

PropertyDescriptionTypeDefaultGlobal Config
[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'✅
[nzGap]Letter type unit distance between left and right sidesnumber4✅
[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-
(nzError)Handler when img load error, call the preventDefault method to prevent default fallback behaviorEventEmitter<Event>-

nz-avatar-group#

 <nz-avatar-group>
  <nz-avatar nzIcon="user"></nz-avatar>
  ...
</nz-avatar-group>