AvatarComponent

Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
    <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
    <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
  `
})
class AppComponent {
  userImage = 'path/to/image.jpg';
  userInitials = 'JD';
  userIcon = 'user';
}

Selector

kendo-avatar

Inputs

Name	Type	Default	Description
border	boolean	false	Adds a border to the Avatar.
cssStyle?	any		Defines the CSS styles that render on the content element of the Avatar. Supports the type of values that ngStyle supports.
fillMode	AvatarFillMode	'solid'	Specifies the fill style of the Avatar.
height	string		Sets the height of the Avatar.
icon	string		Sets the icon for the Avatar. All Kendo UI Icons are supported.
iconClass	string		Defines a CSS class or multiple classes separated by spaces. You can apply these classes to a span element inside the Avatar and also use custom icons.
imageSrc	string		Sets the image source of the Avatar.
initials	string		Sets the initials for the Avatar.
rounded	AvatarRounded	'full'	Specifies the rounded styling of the Avatar (see example).
size	AvatarSize	'medium'	Specifies the size of the Avatar (see example).
svgIcon	SVGIcon		Defines an SVG icon to render. You can use either an existing Kendo SVG icon or a custom one.
themeColor	AvatarThemeColor	'primary'	Specifies the theme color of the Avatar. The theme color applies as background and border color while adjusting the text color accordingly.
width	string		Sets the width of the Avatar.