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-angular-ui/assets/dropdowns/contacts/RICSU.jpg';The following example demonstrates how to display an image inside the Avatar component.
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.
Icon Avatar
The Avatar provides the following options to set an icon inside the component:
Displaying SVG Icons—Sets an SVG icon inside the Avatar.Font and third-party icons—Sets a font icon inside the Avatar.
As of R2 2023 (
v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed fromfonttosvg. Set thesvgIconproperty, 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.
Displaying Font Icons
o display a font icon inside the Avatar:
- Use the
ICON_SETTINGStoken of the Icons package and set the icon type tofont. For more information, go to the topic about icon settings. - Depending on the font icons library, you can set the:
iconproperty to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.html<kendo-avatar icon="user" size="large"></kendo-avatar>iconClassproperty to a third-party font icon (like FontAwesome).html<kendo-avatar iconClass="fa fa-taxi"></kendo-avatar>
The following example demonstrates how to set the icon property of the Avatar.
The following example demonstrates how to set the iconClass property of the Avatar.