Styling

To get started with styling the avatar, we need to import the index file, where all the theme functions and component mixins live:

@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-avatar-theme and accepts the $initials-background, $initials-color, $icon-background, $icon-color and the $border-radius-square parameters.

Using CSS variables

Using mixins

In order to style components for Internet Explorer 11, 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: