• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Layout / API / AvatarComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

AvatarComponent

Displays images, icons or initials representing people or other entities.

Selector

kendo-avatar

Inputs

NameTypeDefaultDescription

border

boolean

Sets a border to the avatar.

cssStyle?

any

The CSS styles that will be rendered on the content element of the avatar. Supports the type of values that are supported by ngStyle.

fillMode

AvatarFillMode

Specifies the appearance fill style of the avatar.

The possible values are:

  • solid (Default)
  • outline
  • none

height

string

Sets the height of the avatar.

icon

string

Sets the icon for the avatar. All Kendo UI Icons are supported.

iconClass

string

Defines a CSS class — or multiple classes separated by spaces — which are applied to a span element inside the avatar. Allows the usage of custom icons.

imageSrc

string

Sets the image source of the avatar.

initials

string

Sets initials to the avatar.

rounded

AvatarRounded

Specifies the rounded styling of the avatar (see example).

The possible values are:

  • small
  • medium
  • large
  • full (Default)
  • none

size

AvatarSize

Specifies the size of the avatar (see example).

The possible values are:

  • small
  • medium (Default)
  • large
  • none

svgIcon

SVGIcon

Defines an SVGIcon to be rendered. The input can take either an existing Kendo SVG icon or a custom one.

themeColor

AvatarThemeColor

Specifies the theme color of the avatar. The theme color will be applied as background and border color, while also amending the text color accordingly.

The possible values are:

  • base— Applies the base coloring value.
  • primary (Default)—Applies coloring based on primary theme color.
  • secondary—Applies coloring based on secondary theme color.
  • tertiary— Applies coloring based on tertiary theme color.
  • info—Applies coloring based on info theme color.
  • success— Applies coloring based on success theme color.
  • warning— Applies coloring based on warning theme color.
  • error— Applies coloring based on error theme color.
  • dark— Applies coloring based on dark theme color.
  • light— Applies coloring based on light theme color.
  • inverse— Applies coloring based on inverted theme color.
  • none— Removes the styling associated with the theme color.

width

string

Sets the width of the avatar.

In this article

Not finding the help you need?

Contact Support