Angular Avatar Component Overview
Angular Avatar component helps adding initials, images, or material icons to your application.
Angular Avatar Example
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Avatar
To get started with the Ignite UI for Angular Avatar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
cmd
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxAvatarModule
in your app.module.ts file.
// app.module.ts
...
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxAvatarModule],
...
})
export class AppModule {}
typescript
Alternatively, as of 16.0.0
you can import the IgxAvatarComponent
as a standalone dependency.
// home.component.ts
...
import { IgxAvatarComponent } from 'igniteui-angular';
// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-avatar shape="circle"></igx-avatar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxAvatarComponent]
})
export class HomeComponent {}
typescript
Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the igx-avatar
component.
Using the Angular Avatar Component
The Ignite UI for Angular Avatar component comes in three shapes (square, rounded, and circle) and three size options (small, medium, and large). It can be used for displaying initials, images or icons.
Avatar Shape
We can change the avatar shape through the shape
attribute setting its value to square
, rounded
or circle
. By default, the shape of the avatar is square
.
<igx-avatar shape="circle"></igx-avatar>
html
Avatar displaying initials
To get a simple avatar with initials
(i.e. JS for 'Jack Sock'), add the following code inside the component template:
<igx-avatar initials="JS" shape="circle"></igx-avatar>
html
Let's enhance our avatar by making it circular and bigger in size.
<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
html
We can also change the background through the background
property or set a color on the initials through the color
property.
// avatar.component.scss
igx-avatar {
background: #e41c77;
color: #000000;
}
scss
The roundShape
property of the igx-avatar
component have been deprecated. The shape
attribute should be used instead.
If all went well, you should see something like the following in the browser:
Avatar displaying image
To get an avatar that displays an image, all you have to do is set the image source via the src
property.
<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
shape="rounded"
size="large">
</igx-avatar>
html
If all went well, you should see something like the following in the browser:
Avatar displaying icon
Analogically, the avatar can display an icon via the icon
property. Currently all icons from the material icon set are supported.
<igx-avatar icon="person"
shape="rounded"
size="small">
</igx-avatar>
html
You should see something like this:
Styling
To get started with styling the avatar, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Following the simplest approach, we create a new theme that extends the avatar-theme
and accepts the $background
, $color
, and the $border-radius
parameters.
Given the following markup:
<div class="avatar-sample initials">
<igx-avatar initials="JS" size="medium"></igx-avatar>
</div>
html
We create the following avatar theme:
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius: 16px
);
scss
The last step is to pass the custom avatar theme:
.initials {
@include css-vars($custom-avatar-theme);
}
scss
If all went well, you should see something like the following in the browser:
Custom sizing
You can either use the --size
variable, targeting the igx-avatar
directly:
igx-avatar {
--size: 200px;
}
scss
Or you can use the universal --igx-avatar-size
variable to target all instances:
<div class="my-app">
<igx-avatar></igx-avatar>
</div>
html
.my-app {
--igx-avatar-size: 200px;
}
scss
You can also use one of the predefined sizes, assigning it to the --ig-size
variable, if theres no size attribute applied. The available values for --ig-size
are --ig-size-small
, --ig-size-medium
, and --ig-size-large
:
igx-avatar {
--ig-size: var(--ig-size-small);
}
scss
Learn more about it in the Size article.
API References
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.