New to Kendo UI for Angular? Start a free 30-day trial

AvatarComponent

Displays images, icons or initials representing people or other entities.

Selector

kendo-avatar

Inputs

border

boolean

Sets a border to the avatar.

cssStyle?

any

The CSS styles that will be rendered on the content element of the avatar. Supports the type of values that are supported by ngStyle.

fill

AvatarFill

Specifies the appearance fill style of the avatar.

The possible values are:

  • solid (Default)
  • outline

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 — which are applied to a span element inside the avatar. Allows the usage of custom icons.

imageSrc

string

Sets the image source of the avatar.

initials

string

Sets initials to the avatar.

width

string

Sets the width of the avatar.

shape

AvatarShape

Sets the shape for the avatar.

Possible values are:

  • (Default) square
  • circle
  • rectangle
  • rounded

size

AvatarSize

Specifies the size of the avatar (see example).

The possible values are:

  • small
  • medium (Default)
  • large

themeColor

AvatarThemeColor

Specifies the theme color of the avatar. The theme color will be applied as background and border color, while also amending the text color accordingly.

The possible values are:

  • primary (Default)Applies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • inherit Applies inherited coloring value.
  • infoApplies coloring based on info theme color.
  • success Applies coloring based on success theme color.
  • warning Applies coloring based on warning theme color.
  • error Applies coloring based on error theme color.
  • dark Applies coloring based on dark theme color.
  • light Applies coloring based on light theme color.
  • inverse Applies coloring based on inverted theme color.