Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

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:

  • ImageTo 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.
  • base Applies the base 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.
  • noneRemoves the styling associated with the theme color.

The following example demonstrates the Avatar theme colors in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Roundness

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

The available rounded values are:

  • smallRenders an avatar with small border radius.
  • mediumRenders an avatar with medium border radius.
  • largeRenders 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.
  • noneRemoves 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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
  • noneRemoves 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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
  • noneRemoves 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.

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: