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

Customizing Avatar

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber

1px

1px

Description
Border width of the avatar.
$kendo-avatar-font-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of the avatar.
$kendo-avatar-font-sizeNumber

$font-size

14px

Description
Font size of the avatar.
$kendo-avatar-line-heightNumber

$line-height

2

Description
Line height of the avatar.
$kendo-avatar-sizesMap

( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )

(sm: 16px, md: 32px, lg: 64px)

Description
The sizes of the avatar.
$kendo-avatar-theme-colorsMap

$kendo-theme-colors

("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)

Description
Theme colors map of the avatar.

In this article

Not finding the help you need?