Avatar SAP SE An image-like control that has different display options for representing images, initials, and icons. <h3>Overview</h3> The <code>Avatar</code> control allows the usage of different content, shapes, and sizes depending on the use case. The content types that can be displayed are either images, icons, or initials. The shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size. <h3>Usage</h3> Up to two Latin letters can be displayed as initials in an <code>Avatar</code>. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created. There are two options for how the displayed image can fit inside the available area: <ul> <li>Cover - the image is scaled to cover all of the available area</li> <li>Contain - the image is scaled as large as possible while both its height and width fit inside the avalable area</li> </ul> <b>Note:</b> To set a custom size for the <code>Avatar</code>, you have to choose the <code>Custom</code> value for the <code>displaySize</code> property. Then, you have to set both the <code>customDisplaySize</code> and <code>customFontSize</code> properties. 1.73 sap.ui.core/Control Determines the path to the desired image or icon. Defines the displayed initials. Defines the shape of the <code>Avatar</code>. Sets a predefined display size of the <code>Avatar</code>. Specifies custom display size of the <code>Avatar</code>. <b>Note:</b> It takes effect if the <code>displaySize</code> property is set to <code>Custom</code>. Specifies custom font size of the <code>Avatar</code>. <b>Note:</b> It takes effect if the <code>displaySize</code> property is set to <code>Custom</code>. Specifies how an image would fit in the <code>Avatar</code>. Defines the fallback icon displayed in case of wrong image src and no initials set. <b>Notes:</b> <ul> <li>If not set, a default fallback icon is displayed depending on the set <code>displayShape</code> property.</li> <li>Accepted values are only icons from the SAP icon font.</li> </ul> Determines the background color of the control. <b>Note:</b> By using background colors from the predefined sets, your colors can later be customized from the Theme Designer. Determines whether the control is displayed with border. Fired when the user selects the control. A <code>sap.m.LightBox</code> instance, that will be opened automatically when the user interacts with the <code>Avatar</code> control. The <code>press</code> event will still be fired. Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby). Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledBy).