How can I help you?
Customization in EJ2 TypeScript Avatar control
5 Mar 202624 minutes to read
Color customization
The Avatar control provides a default background color (gray). This background can be customized by adding a custom CSS class or by directly selecting the avatar class from the CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Avatar </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Avatar UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'>
<span class="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
</div>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: 100px auto;
border-radius: 3px;
justify-content: center;
}
.e-avatar {
margin: 2px;
}
.e-avatar.green {
background-color: #87eb87;
}
.e-avatar.violet {
background-color: #ee82ee;
}
.e-avatar.blue {
background-color: #7171e4;
}
.e-avatar.red {
background-color: #d86e6e;
}
.e-avatar.rose {
background-color: #bc8f8f;
}
</style>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}Customize avatar sizes
The Avatar control provides five predefined sizes. To create custom sizes, change the font-size of the avatar element — the avatar’s width and height are relative to its font-size, so adjusting font-size scales the avatar accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Avatar </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Avatar UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'>
<span class="e-avatar">26px</span>
<span class="e-avatar">24px</span>
<span class="e-avatar">22px</span>
<span class="e-avatar">20px</span>
<span class="e-avatar">18px</span>
</div>
</div>
<style>
#element {
display: block;
width: 400px;
margin: 100px auto;
border-radius: 3px;
}
#element :nth-child(5) {
font-size: 18px;
}
#element :nth-child(4) {
font-size: 20px;
}
#element :nth-child(3) {
font-size: 22px;
}
#element :nth-child(2) {
font-size: 24px;
}
#element :nth-child(1) {
font-size: 26px;
}
</style>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}Use various media in avatar
Avatars support multiple media types such as SVG, font icons, images, letters, and words. Examples demonstrating these formats are shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Avatar </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Avatar UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'>
<div class="sample_container avatar-types">
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle image"></div>
</div>
<div class="e-card-content">
<div>Image</div>
</div>
</div>
</div>
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle">
<div class="svg_icons chrome"></div>
</div>
</div>
<div class="e-card-content">
<div>SVG</div>
</div>
</div>
</div>
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
</div>
<div class="e-card-content">
<div>Initial</div>
</div>
</div>
</div>
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle">
<div class="e-people icons"></div>
</div>
</div>
<div class="e-card-content">
<div>FontIcon</div>
</div>
</div>
</div>
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
</div>
<div class="e-card-content">
<div>Word</div>
</div>
</div>
</div>
<div class="avatar-block">
<!-- Card Control -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<!-- XLarge Circle Avatar Control -->
<div class="e-avatar e-avatar-xlarge e-avatar-circle custom">
<div class="e-people icons"></div>
</div>
</div>
<div class="e-card-content">
<div>Custom</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#element {
width: auto;
margin: auto;
border-radius: 3px;
justify-content: center;
}
/* Media Queries for various devices */
@media only screen and (max-width: 965px) {
.sample_container.avatar-types {
max-width: 265px;
margin: auto;
margin-top: 0;
}
.e-avatar-showcase.e-card {
width: 120px;
}
}
@media only screen and (min-width: 965px) {
.sample_container.avatar-types {
max-width: 488px;
margin: auto;
margin-top: 35px;
}
.e-avatar-showcase.e-card {
width: 150px;
}
}
.sample_container.avatar-types .avatar-block {
display: inline-block;
vertical-align: top;
}
/* Avatar image source in 'background-image' property */
.e-avatar.image {
background-image: url(https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* SVG Icons */
.chrome {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.svg_icons {
width: 32px;
height: 32px;
display: inline-block;
}
/* Card Customization */
.e-avatar-showcase.e-card {
height: 113px;
padding: 5px;
margin: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 8px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {
align-self: center;
font-size: 18px;
letter-spacing: 1px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
color: rgba(0, 0, 0, 0.75);
white-space: pre-line;
font-size: 14px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
margin: 0;
}
.e-avatar-showcase.e-card .e-card-content {
align-self: center;
padding: 10px 0 10px 0;
overflow: visible;
}
.e-avatar-showcase.e-card .e-card-content .e-avatar {
font-size: 18px;
}
/* Font Icons */
@font-face {
font-family: 'Contacts';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
.people,
.e-people {
font-family: 'Contacts';
}
.e-people:before {
content: '\e700';
}
.e-avatar .e-people.icons {
font-size: 24px;
}
/* Custom Avatar Background Color */
.e-avatar.custom {
background-color: blueviolet;
}
</style>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}