Angular Avatar represents people using icons, labels and images.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {AvatarModule} from 'primeng/avatar';
import {AvatarGroupModule} from 'primeng/avatargroup';
Getting Started
Avatar has three built-in display modes; "label", "icon" and "image".
<p-avatar label="P"></p-avatar>
<p-avatar icon="pi pi-search"></p-avatar>
<p-avatar label="user.png"></p-avatar>
Sizes
size property defines the size of the Avatar with "large" and "xlarge" as possible values.
<p-avatar label="P" size="large"></p-avatar>
AvatarGroup
A set of Avatars can be displayed together using the AvatarGroup component.
<p-avatarGroup label="P">
<p-avatar label="P"></p-avatar>
<p-avatar icon="pi pi-search"></p-avatar>
<p-avatar label="user.png"></p-avatar>
<p-avatar label="+2"></p-avatar>
</p-avatarGroup>
Shape
Avatar comes in two different styles specified with the shape property, "square" is the default and "circle" is the alternative.
<p-avatar label="P" shape="circle"></p-avatar>
Badge
A badge can be added to an Avatar with the Badge directive.
<p-avatar image="user.png" pBadge value="4" severity="danger" size="xlarge"></p-avatar>
Templating
Content can easily be customized with the dynamic content instead of using the built-in modes.
<p-avatar>
Content
</p-avatar>
Theming
Avatar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Avatar showcase for demos and documentation.