feat(experimental): add padding when use img inside tui-avatar

projects/experimental/components/avatar/avatar.component.ts

@@ -1,4 +1,12 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Inject,
+    Input,
+    Renderer2,
+} from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
 import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
 import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
@@ -19,7 +27,7 @@ import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
         '[class._round]': 'round',
     },
 })
-export class TuiAvatarComponent {
+export class TuiAvatarComponent implements AfterViewInit {
     @Input()
     size = this.options.size;
 
@@ -35,8 +43,23 @@ export class TuiAvatarComponent {
     constructor(
         @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
         @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
+        @Inject(ElementRef)
+        private readonly elementRef: ElementRef,
+        @Inject(Renderer2) private readonly renderer: Renderer2,
     ) {}
 
+    ngAfterViewInit(): void {
+        const firstChild = (this.elementRef.nativeElement as HTMLElement)
+            .firstElementChild;
+
+        if (
+            firstChild?.tagName === 'IMG' &&
+            this.tuiIconPipeUsed((firstChild as HTMLImageElement).src)
+        ) {
+            this.renderer.setStyle(firstChild, 'padding', '20%');
+        }
+    }
+
     get safeSrc(): string {
         return this.src?.toString() ?? '';
     }
@@ -60,4 +83,8 @@ export class TuiAvatarComponent {
 
         return this.value.length ? 'img' : 'content';
     }
+
+    tuiIconPipeUsed(src: string): boolean {
+        return src.includes('/assets/taiga-ui/icons');
+    }
 }

projects/experimental/components/avatar/avatar.style.less

@@ -120,5 +120,6 @@
     ::ng-deep video {
         .fullsize();
         object-fit: cover;
+        box-sizing: border-box;
     }
 }