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

Appearance

The Avatar allows you to render its content by using a number of default and custom styling options and set its theme color, shape, fill, and more.

Avatar Type

The Avatar provides option for rendering its content by using the following styling elements:

  • ImagesTo set the image Avtar, pass the imageSrc property.
  • InitialsTo define the initials Avatar, set the initials property to any given string.
  • IconTo configure the icon Avatar, pass an icon name to the icon property.

The following example demonstrates all Avatar types in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Theme Color

The Avatar allows you to specify predefined theme colors which will be applied as a background and border color while also accordingly amending the text color.

The available themeColor values are:

  • primary (Default)Applies coloring based on the primary theme color.
  • secondaryApplies coloring based on the secondary theme color.
  • tertiary Applies coloring based on the tertiary theme color.
  • inherit Applies the inherited coloring value.
  • infoApplies coloring based on the info theme color.
  • success Applies coloring based on the success theme color.
  • warning Applies coloring based on the warning theme color.
  • error Applies coloring based on the error theme color.
  • dark Applies coloring based on the dark theme color.
  • light Applies coloring based on the light theme color.
  • inverse Applies coloring based on the inverted theme color.
Example
View Source
Edit In Stackblitz  
Change Theme:

Shape

To apply different shapes to Avatars, set the shape property.

The available shape values are:

  • circleRenders a circular avatar.
  • roundedRenders an avatar with rounded borders.
  • square(Default)Renders a square avatar.
  • rectangleRenders a rectangular avatar.
Example
View Source
Edit In Stackblitz  
Change Theme:

Size

The Avatar allows you to set predefined or custom sizes.

To specify a predefined size, set the size property.

The available size values are:

  • small
  • medium (Default)
  • large

To specify a custom avatar size, use the width and height properties.

Example
View Source
Edit In Stackblitz  
Change Theme:

Fill

The Avatar enables you to set styling options and create solid or outline avatars by setting the fill property.

The available fill values are:

  • solid (Default)
  • outline

You can also render an additional border around the content of an outlined avatar by setting the border property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Border

The Avatar allows you to specify whether or not to render an additional border around its content by using the border property. By default, border is set to false.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Content

You can also define any custom content as an avatar between <kendo-avatar> tags.

Example
View Source
Edit In Stackblitz  
Change Theme: