themeColor String (default: 'primary')

The Avatar allows you to specify predefined theme colors for background of its container. The available themeColor values are: - "primary" (Default) - Applies coloring based on primary theme color. - "base" - Applies base theme color. - "secondary" - Applies coloring based on secondary theme color. - "tertiary" - Applies coloring based on tertiary theme color. - "inherit" - Applies inherited coloring value. - "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" - Does not apply theme color class.

Example

<div id="avatar"></div>
<script>
    $("#avatar").kendoAvatar({
        text: "IG",
        themeColor: "warning"
    });
</script>
In this article