Avatar
The Ignite UI for Angular Avatar component helps adding initials, images, or material icons to your application.
Angular Avatar Example
Usage
To get started with the Avatar component, first you need to install Ignite UI for Angular by typing the following command:
ng add igniteui-angular
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxAvatarModule
in the 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 {}
Examples
The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons.
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">
</igx-avatar>
Let's enhance our avatar by making it circular and bigger in size.
<igx-avatar initials="JS"
[roundShape]="true"
size="medium">
</igx-avatar>
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;
}
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"
[roundShape]="true"
size="large">
</igx-avatar>
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"
[roundShape]="true"
size="small">
</igx-avatar>
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';
Following the simplest approach, we create a new theme that extends the avatar-theme
and accepts the $background
, $color
, and the $border-radius-square
parameters.
Given the following markup:
<div class="initials-avatar">
<igx-avatar>BA</igx-avatar>
</div>
We need to create a theme:
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius-square: 16px
);
Using CSS variables
The last step is to pass the custom avatar theme:
.initials-avatar {
@include css-vars($custom-avatar-theme);
}
Using mixins
In order to style components for Internet Explorer 11 and older browsers, we have to use different approach, since it doesn't support CSS variables.
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
. On the other side, in order to prevent the custom theme to leak to other components, be sure to include the :host
selector before ::ng-deep
:
:host {
::ng-deep {
// Pass the custom avatar theme to the `igx-avatar` mixin
.initials-avatar {
@include avatar($custom-avatar-theme);
}
}
}
If all went well, you should see something like the following in the browser:
API References
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.