Avatar Appearance

The Avatar allows you to render its content by using a number of built-in options such as image, initials or an icon. It exposes custom styling options which allow setting its theme color, roundness, fill mode, and more.

Avatar Type

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

• Image—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.
• base— Applies the base 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.
• none—Removes the styling associated with the theme color.

The following example demonstrates the Avatar theme colors in action.

Roundness

To Avatar enables you to apply different border radius through the rounded property.

The available rounded values are:

• small—Renders an avatar with small border radius.
• medium—Renders an avatar with medium border radius.
• large—Renders an avatar with more prominent border radius.
• full (Default)—Renders a circle Avatar when the width and height are equal, or a pill-shaped one otherwise.
• none—Removes the styling, associated with the rounded corners. Renders an Avatar with four right angles.

The following example demonstrates how to customize the roundness of the Avatar.

Size

The Avatar allows you to customize its width and height. To achieve this utilize the the size property.

The available size values are:

• small
• medium (Default)
• large
• none—Removes the styling associated with the sizing.

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

The following example demonstrates how to define the size of the Avatar.

Fill Mode

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

The available fillMode values are:

• solid (Default)
• outline
• none—Removes the styling associated with the fill mode.

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

The following example demonstrates how to define the fill mode of the Avatar.

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