Search results

How To

As the avatar is a completely customizable and integral component, this section shows some of the customization and integration of avatar with other components.

Customize avatars

Colour customization

The avatar comes with default background colour (grey). This can be easily customized to the desired colour by adding custom class or directly selecting the avatar class from the CSS.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
        <div>
            <span className="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
            <span className="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
            <span className="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
            <span className="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
            <span className="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
        </div>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#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;
}

Customize avatar sizes

Even though the avatar comes with five predefined sizes, sometimes it’s not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the font-size of the avatar element, you can change the width and height automatically.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
        <div>
            <span className="e-avatar e-avatar-xlarge"></span>
            <span className="e-avatar e-avatar-large"></span>
            <span className="e-avatar"></span>
            <span className="e-avatar e-avatar-small"></span>
            <span className="e-avatar e-avatar-xsmall"></span>
        </div>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#element {
    display: block;
    width: 400px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    background-image: url(./pic01.png);
    margin: 2px;
}

#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;
}

Use various media in avatar

Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. Some of them are given below.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
        <div>
            <div className="sample_container avatar-types">
                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle">
                                    <img className="image" src="./pic01.png" alt="avatar" />
                                </div>
                        </div>
                        <div className="e-card-content">
                            <div>Image</div>
                        </div>
                    </div>
                </div>

                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle">
                                <div className="svg_icons chrome"></div>
                            </div>
                        </div>
                        <div className="e-card-content">
                            <div>SVG</div>
                        </div>
                    </div>
                </div>

                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
                        </div>
                        <div className="e-card-content">
                            <div>Initial</div>
                        </div>
                    </div>
                </div>

                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle">
                                <div className="e-people icons"></div>
                            </div>
                        </div>
                        <div className="e-card-content">
                            <div>Font Icon</div>
                        </div>
                    </div>
                </div>

                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
                        </div>
                        <div className="e-card-content">
                            <div>Word</div>
                        </div>
                    </div>
                </div>

                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* XLarge Circle Avatar Component  */}
                            <div className="e-avatar e-avatar-xlarge e-avatar-circle custom">
                                <div className="e-people icons"></div>
                            </div>
                        </div>
                        <div className="e-card-content">
                            <div>Custom</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#element {
    width: auto;
    margin: auto;
    border-radius: 3px;
    justify-content: center;
}


/* Media Quries 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 img.image {
    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;
}

Dynamic avatar rendering from datasource

We can render avatar component dynamically from a data-source. In this sample we have rendered the avatar component using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the avatar using CSS property background-image and using image tag.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {

    render() {
        let dataSource: { [key: string]: string }[] = [
            { src: './pic01.png', size: 'e-avatar-xsmall' },
            { src: './pic01.png', size: 'e-avatar-small' },
            { src: './pic01.png', size: 'e-avatar' },
            { src: './pic01.png', size: 'e-avatar-large' },
            { src: './pic01.png', size: 'e-avatar-xlarge' }
        ];

        return (
            <div className='control-pane'>
                <div className="sample_container avatar-badge">
                    <div className="avatar-block">
                        <div className="e-card e-avatar-showcase">
                            <div className="e-card-content">
                                {dataSource.map(function (item) {
                                    return (<div className={`e-avatar e-avatar-circle ${item.size}`} style={{ backgroundImage: `url(${item.src})` }}></div>)
                                })}
                            </div>
                            <div className="e-card-content">
                                <div>Using <code>background-image</code> property</div>
                            </div>
                        </div>
                    </div>

                    <div className="circleAvatar avatar-block">
                        <div className="e-card e-avatar-showcase">
                            <div className="e-card-content">
                                {dataSource.map(function (item) {
                                    return (<div className={`e-avatar e-avatar-circle ${item.size}`} >
                                        <img src={item.src} />
                                    </div>)
                                })}
                            </div>
                            <div className="e-card-content">
                                <div>Using <code>img</code> tag</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#element {
  display: block;
  margin: auto;
  border-radius: 3px;
  justify-content: center;
}

.sample_container.avatar-badge .avatar-sub-block {
  display: inline-block;
  position: relative;
  margin: 7px
}

.sample_container.avatar-badge .avatar-block {
  display: inline-block;
  vertical-align: top;
}

.e-avatar {
  margin: 2px;
}

/* Media Queries for various devices */

@media only screen and (max-width: 965px) {
  .sample_container.avatar-badge {
    max-width: 332px;
    margin: auto;
    margin-top: 0;
  }
  .circleAvatar {
    margin-top: 15px;
  }
  .e-avatar-showcase.e-card {
    width: 320px;
  }
}

@media only screen and (min-width: 965px) {
  .sample_container.avatar-badge {
    max-width: 825px;
    margin: auto;
    margin-top: 70px;
  }
  .e-avatar-showcase.e-card {
    width: 400px;
  }
}

/* Card Customization */

.e-avatar-showcase.e-card {
  height: 140px;
  padding: 4px;
  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-content {
  align-self: center;
  padding: 10px 11px 10px 0px;
  color: rgba(0, 0, 0, 0.75);
  overflow: visible;
}

Integrate avatars

Avatar can be integrated into various components to make a wide variety of applications. Some of the integrations are shown in the following section.

Listview

Avatar is integrated into the listview to create contacts applications. The xsmall size avatar is used to match the size of the list item. Letters and images are also used as avatar content.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

class ReactApp extends React.Component<{}, {}> {

    //Define an array of JSON data
    public data: { [key: string]: Object }[] = [
        { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
        { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
        { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
        { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
        { id: 's_06', text: 'Michael', pic: 'pic02', avatar: '' },
        { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
        { id: 's_08', text: 'Margaret', avatar: 'M', pic: '' }
    ];
    public template(data: any): JSX.Element {
        let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>
        let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>

        return (
            <div className='listWrapper'>
                {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
                <span className='text'>{data.text}</span>
            </div>
        );
    }

  render() {
       return (
        <div>
            <div className="sample_container listview">
                {/* ListView element */}
                <ListViewComponent id='letterAvatarList' dataSource={this.data} headerTitle='Contacts' showHeader={true}
                    sortOrder="Ascending" template={this.template as any}></ListViewComponent>
            </div>
        </div>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#element {
    width: 400px;
    margin: auto;
    border-radius: 3px;
    justify-content: center;
}

/* Listview Customization */

#letterAvatarList {
    max-width: 350px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#letterAvatarList .listWrapper {
    width: inherit;
    height: inherit;
    position: relative;
}

#letterAvatarList .e-list-header {
    height: 54px;
}

.material #letterAvatarList .e-list-header .e-text {
    line-height: 22px;
}

.fabric #letterAvatarList .e-list-header .e-text {
    line-height: 22px;
}

.bootstrap #letterAvatarList .e-list-header .e-text {
    line-height: 13px;
}

.highcontrast #letterAvatarList .e-list-header .e-text {
    line-height: 20px;
}

#letterAvatarList .e-list-item {
    cursor: pointer;
    height: 50px;
    line-height: 44px;
    border: 0;
}

/* Badge Positioning */

#letterAvatarList .e-badge {
    margin-top: 12px;
}

#letterAvatarList .listWrapper .text {
    width: 60%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 50px;
}

/* Avatar Positioning */

#letterAvatarList .listWrapper .e-avatar {
    position: absolute;
    top: calc(100% - 40px);
    font-size: 10px;
    left: 5px;
}

/* Avatar Background Customization */

#letterAvatarList .e-list-item:nth-child(1) .e-avatar {
    background-color: #039BE5;
}

#letterAvatarList .e-list-item:nth-child(3) .e-avatar {
    background-color: #E91E63;
}

#letterAvatarList .e-list-item:nth-child(5) .e-avatar {
    background-color: #009688;
}

/* Avatar images using 'background-image' property */

.pic01 {
    background-image: url('./pic01.png');
}

.pic02 {
    background-image: url('./pic02.png');
}

.pic03 {
    background-image: url('./pic03.png');
}

.pic04 {
    background-image: url('./pic04.png');
}

Badge

The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. The default avatar (.e-avatar) and circle avatar (.e-avatar-circle) have been used with notification badges (.e-badge-notification) in the following sample.

Source
Preview
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
        <div>
            <div className="sample_container avatar-badge">
                <div className="avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            <div className="avatar-sub-block">
                                {/* xSmall Avatar */}
                                <div className="e-avatar e-avatar-xsmall">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Small Avatar */}
                                <div className="e-avatar e-avatar-small">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Avatar */}
                                <div className="e-avatar">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Large Avatar */}
                                <div className="e-avatar e-avatar-large">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* xLarge Avatar */}
                                <div className="e-avatar e-avatar-xlarge">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="circleAvatar avatar-block">
                    {/* Card Component  */}
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            <div className="avatar-sub-block">
                                {/* xSmall Circle Avatar */}
                                <div className="e-avatar e-avatar-circle e-avatar-xsmall">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Small Circle Avatar */}
                                <div className="e-avatar e-avatar-circle e-avatar-small">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Circle Avatar */}
                                <div className="e-avatar e-avatar-circle">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* Large Circle Avatar */}
                                <div className="e-avatar e-avatar-circle e-avatar-large">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
                            </div>
                            <div className="avatar-sub-block">
                                {/* xLarge Circle Avatar */}
                                <div className="e-avatar e-avatar-circle e-avatar-xlarge">
                                    <img src="./pic01.png" alt="profile_pic" />
                                </div>
                                {/* Notification Badge  */}
                                <span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</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%;
}

#element {
    display: block;
    margin: auto;
    border-radius: 3px;
    justify-content: center;
}

.sample_container.avatar-badge .avatar-sub-block {
    display: inline-block;
    position: relative;
    margin: 7px
}

.sample_container.avatar-badge .avatar-block {
    display: inline-block;
    vertical-align: top;
}

/* Media Queries for various devices */

@media only screen and (max-width: 965px) {
    .sample_container.avatar-badge {
        max-width: 332px;
        margin: auto;
        margin-top: 0;
    }
    .circleAvatar {
        margin-top: 15px;
    }
    .e-avatar-showcase.e-card {
        width: 320px;
    }
}

@media only screen and (min-width: 965px) {
    .sample_container.avatar-badge {
        max-width: 825px;
        margin: auto;
        margin-top: 70px;
    }
    .e-avatar-showcase.e-card {
        width: 400px;
    }
}

.e-avatar.image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Card Customization */

.e-avatar-showcase.e-card {
    height: 140px;
    padding: 4px;
    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 11px 10px 0px;
    color: rgba(0, 0, 0, 0.75);
    overflow: visible;
}