AvatarComponent
Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
Definition
Package:@progress/kendo-angular-layout
Selector:kendo-avatar
Syntax:
@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';
}Inputs
border
boolean
Adds a border to the Avatar.
false
cssStyle?
any
Defines the CSS styles that render on the content element of the Avatar.
Supports the type of values that ngStyle supports.
Specifies the fill style of the Avatar. The default value is set by the Kendo theme.
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.
Specifies the rounded styling of the Avatar (see example). The default value is set by the Kendo theme.
Specifies the size of the Avatar (see example). The default value is set by the Kendo theme.
svgIcon
SVGIcon
Defines an SVG icon to render. You can use either an existing Kendo SVG icon or a custom one.
Specifies the theme color of the Avatar. The theme color applies as background and border color while adjusting the text color accordingly. The default value is set by the Kendo theme.
width
string
Sets the width of the Avatar.