Avatar Appearance
The Kendo UI for Angular Avatar exposes custom styling options which allow you to set its theme color, roundness, fill mode, and more aspects of its appearance.
Since version 22.1.0, default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
For more information, refer to the Design System documentation.
Theme Color
The Avatar allows you to specify predefined theme colors which will be applied as background and border colors while amending the text color at the same time accordingly.
The available themeColor values are:
primarysecondarytertiarybaseinfosuccesswarningerrordarklightinverse
The following example demonstrates the Avatar theme colors in action.
Roundness
The Avatar enables you to apply different border radiuses through the rounded property.
The available rounded values are:
smallmediumlargefullnone
The following example demonstrates how to customize the roundness of the Avatar.
Size
The Avatar allows you to customize its width and height by using the size property.
The available size values are:
smallmediumlarge
To specify a custom Avatar size, use the
widthandheightproperties.
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:
solidoutline
You can also render an additional border around the content of an outlined avatar by setting the
borderproperty totrue.
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 between the <kendo-avatar> tags as an avatar.