Avatars are found throughout material design with uses in everything from tables to dialog menus.
Styled byLS Avatar
Image avatars can be created by passing standard Img props to the component.
<div class="D-flex Justify-content-center">
<Avatar class="W-25 W-lg-15" [Img]="'https://i.pravatar.cc/500'" [Alt]="'John Doe'"></Avatar>
<Avatar class="W-25 W-lg-15" [Img]="'https://i.pravatar.cc/525'" [Alt]="'Jane Doe'"></Avatar>
</div>
Avatars containing simple characters.
<div class="D-flex Justify-content-center">
<Avatar class="W-25 W-lg-15" [Letter]="'I'" [BgColor]="'#25C0F4'"></Avatar>
<Avatar class="W-25 W-lg-15" [Letter]="'AM'" [BgColor]="'pink'" [Alt]="'AM I?'"></Avatar>
<Avatar class="W-25 W-lg-15" [Letter]="'NOT'" [BgColor]="'teal'" [Alt]="'Not at all!!'"></Avatar>
</div>
Icon avatars are created by passing an icon as children.
<div class="D-flex Justify-content-center">
<Avatar class="W-10 Fg-white" [BgColor]="'#25C0F4'"><i class="fa-solid fa-bars"></i></Avatar>
<Avatar class="W-10 Fg-primary"><i class="fa-solid fa-code"></i></Avatar>
<Avatar class="W-10" [BgColor]="'rgba(0,0,0,.1)'" [Border]="false"><i class="fa-solid fa-download"></i></Avatar>
</div>
You can change the size of the avatar with the Css Classes or height and width CSS properties.
<div class="D-flex Justify-content-center">
<Avatar class="W-20" [Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar class="W-10" [Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar style="width: 5%;" [Img]="'https://i.pravatar.cc/500'"></Avatar>
</div>
If you need square or rounded avatars, use the Variant prop.
<div class="D-flex Justify-content-center">
<Avatar class="W-15" [Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar class="W-15" [Variant]="'Rounded'" [Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar class="W-15" [Variant]="'Square'" [Img]="'https://i.pravatar.cc/500'"></Avatar>
</div>
<div class="D-flex Justify-content-center">
<Avatar class="W-15" [Badge]="true" [Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar class="W-15" [Badge]="true" [Anchor]="'Top'" [Variant]="'Rounded'"
[Img]="'https://i.pravatar.cc/500'"></Avatar>
<Avatar class="W-15" [Badge]="true" [Online]="true" [Variant]="'Square'"
[Img]="'https://i.pravatar.cc/500'"></Avatar>
</div>
<div class="D-flex Justify-content-center">
<Avatar class="W-15" [BgColor]="'#25C0F4'"></Avatar>
<Avatar class="W-15" [BgColor]="'#25C0F4'" [Border]="false"></Avatar>
</div>
AvatarGroup renders its children as a stack after 3th. Use Reversed prop for reversed group.
<div class="D-flex Justify-content-center">
<AvatarGroup class="W-100 W-lg-40" [ImgList]="Images"></AvatarGroup>
<AvatarGroup class="W-100 W-lg-40" [ImgList]="Images" [Reversed]="true"></AvatarGroup>
</div>
Images: string[] = [];
ngOnInit(): void {
this.Images = Array.from({length: 10}, (_, i) => 'https://i.pravatar.cc/' + (400 + (i*7)));
}
Use the More prop to show counts.
<div class="D-flex Justify-content-center">
<AvatarGroup class="W-100 W-lg-40" [ImgList]="Images" [More]="true"></AvatarGroup>
<AvatarGroup class="W-100 W-lg-40" [ImgList]="Images" [More]="true" [Reversed]="true"></AvatarGroup>
</div>
Fixed up to 4th images.
<div class="Row G-1">
<AvatarGroup class="Col-12 Col-lg-3 Border PX-4" [ImgList]="Images.slice(0,2)"></AvatarGroup>
<AvatarGroup class="Col-12 Col-lg-4 Border PX-4" [ImgList]="Images.slice(0,3)"></AvatarGroup>
<AvatarGroup class="Col-12 Col-lg-5 Border PX-4" [ImgList]="Images.slice(0,4)"></AvatarGroup>
</div>
<div class="Row G-1">
<AvatarGroup class="Col-12 Col-lg-3 Border PX-4" [ImgList]="Images.slice(0,2)" [Reversed]="true"></AvatarGroup>
<AvatarGroup class="Col-12 Col-lg-4 Border PX-4" [ImgList]="Images.slice(0,3)" [Reversed]="true"></AvatarGroup>
<AvatarGroup class="Col-12 Col-lg-5 Border PX-4" [ImgList]="Images.slice(0,4)" [Reversed]="true"></AvatarGroup>
</div>