The Avatar allows you to render its content by using a number of default and custom styling options and set its theme color, shape, fill, and more.
The Avatar provides option for rendering its content by using the following styling elements:
- Images—To set the image Avtar, pass the
- Initials—To define the initials Avatar, set the
initialsproperty to any given string.
- Icon—To configure the icon Avatar, pass an icon name to the
The following example demonstrates all Avatar types in action.
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.
themeColor values are:
primary(Default)—Applies coloring based on the primary theme color.
secondary—Applies coloring based on the secondary theme color.
tertiary— Applies coloring based on the tertiary theme color.
inherit— Applies the inherited coloring value.
info—Applies 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.
To apply different shapes to Avatars, set the
shape values are:
circle—Renders a circular avatar.
rounded—Renders an avatar with rounded borders.
square(Default)—Renders a square avatar.
rectangle—Renders a rectangular avatar.
The Avatar allows you to set predefined or custom sizes.
To specify a predefined size, set the
size values are:
The Avatar enables you to set styling options and create solid or outline avatars by setting the
fill values are:
You can also render an additional border around the content of an outlined avatar by setting the
border property to
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
You can also define any custom content as an avatar between