Avatar provides a way to display an image, icon or initials to the user.
Igx Module
IgxAvatarModule
Igx Theme
igx-avatar-theme, igx-icon-theme
Igx Keywords
avatar, profile, picture, initials
Igx Group
Layouts

Remarks

[object Object]

Example

<igx-avatar initials="MS" shape="rounded" size="large">
</igx-avatar>

Constructors

Section titled "Constructors"

IgxAvatarComponent

new IgxAvatarComponent(): IgxAvatarComponent

Returns IgxAvatarComponent

Properties

Section titled "Properties"

ariaLabel

Section titled "ariaLabel"

Returns the aria-label attribute of the avatar.

 
ariaLabel: string = 'avatar'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:63

Example

let ariaLabel = this.avatar.ariaLabel;

bgColor

Section titled "bgColor"

Sets the background color of the avatar.

 
bgColor: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:164

Example

<igx-avatar bgColor="yellow"></igx-avatar>

color

Section titled "color"

Sets the color of the avatar's initials or icon.

 
color: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:149

Example

<igx-avatar color="blue"></igx-avatar>

elementRef

Section titled "elementRef" 
elementRef: ElementRef<any>

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:51

icon

Section titled "icon"

Sets an icon to the avatar. All icons from the material icon set are supported.

 
icon: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:186

Example

<igx-avatar icon="phone"></igx-avatar>

id

Section titled "id"

Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0".

 
id: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:111

Example

<igx-avatar id="my-first-avatar"></igx-avatar>

initials

Section titled "initials"

Sets initials to the avatar.

 
initials: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:175

Example

<igx-avatar initials="MN"></igx-avatar>

role

Section titled "role"

Returns the role attribute of the avatar.

 
role: string = 'img'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:74

Example

let avatarRole = this.avatar.role;

roleDescription

Section titled "roleDescription"

Returns the type of the avatar. The avatar can be:

  • "initials type avatar"
  • "icon type avatar"
  • "image type avatar".
  • "custom type avatar".
 
roleDescription: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:99

Example

let avatarDescription = this.avatar.roleDescription;

shape

Section titled "shape"

Sets square, rounded or circular shape to the avatar. By default the shape of the avatar is square.

 
shape: "circle" | "square" | "rounded" = 'square'

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:123

Example

<igx-avatar shape="rounded"></igx-avatar>

size

Section titled "size" 
size: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:238, projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:251

src

Section titled "src" 
src: string

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:198, projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:202

Accessors

Section titled "Accessors"

type

Section titled "type"

Returns the type of the avatar.

get type(): IgxAvatarType

Defined in projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:271

Example

let avatarType = this.avatar.type;

Returns IgxAvatarType