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:

• Images—To set the image Avtar, pass the imageSrc property.
• Initials—To define the initials Avatar, set the initials property to any given string.
• Icon—To configure the icon Avatar, pass an icon name to the icon property.

The following example demonstrates all Avatar types in action.

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.
• secondary—Applies coloring based on the secondary theme color.
• tertiary— Applies coloring based on the tertiary theme color.
• inherit— Applies the inherited coloring value.
• info—Applies 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.

Shape

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

The available shape values are:

• circle—Renders a circular avatar.
• rounded—Renders an avatar with rounded borders.
• square(Default)—Renders a square avatar.
• rectangle—Renders a rectangular avatar.

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.

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.

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.

Custom Content

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

Suggested Links

• API Reference of the Avatar