• 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 / Avatar / Types / 
New to Kendo UI for Angular? Start a free 30-day trial

Avatar Types

The Kendo UI for Angular Avatar allows you to render its content by using a number of built-in options such as image, initials, or an icon.

Image Avatar

To display an image inside the Avatar, set the imageSrc property to an image source.

<kendo-avatar [imageSrc]="accountImg" size="large"></kendo-avatar>
public accountImg = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';

The following example demonstrates how to display an image inside the Avatar component.

Example
View Source
Change Theme:

Initials Avatar

To define the initials Avatar, set the initials property to any given string.

<kendo-avatar initials="MB"></kendo-avatar>

The following example demonstrates how to display initials inside the Avatar component.

Example
View Source
Change Theme:

Icon Avatar

The Avatar provides the following options to set an icon inside the component:

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon inside the Avatar set the svgIcon property of the Avatar to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

<kendo-avatar [svgIcon]="svgCart">Cart</kendo-avatar>
import { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgCart: SVGIcon = cartIcon;

The following example demonstrates how to set an SVG icon inside the Avatar.

Example
View Source
Change Theme:

Displaying Font Icons

o display a font icon inside the Avatar:

  1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
  2. Depending on the font icons library, you can set the:

The following example demonstrates how to set the icon property of the Avatar.

Example
View Source
Change Theme:

The following example demonstrates how to set the iconClass property of the Avatar.

Example
View Source
Change Theme:

Suggested Links

Previous
Overview
Next
Appearance

In this article

Not finding the help you need?

Contact Support