rezise icon label with size proprety

Issue

i have a request , i want to redesign my icon label and i want to add to my componenent the size proprety

this is my icon-label.component.ts

  import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit
} from '@angular/core'

@Component({
  selector: 'mae-icon-label',
  templateUrl: 'icon-label.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconLabelComponent implements OnInit {
  @Input() icon: string
  @Input() color: string
  @Input() iconPosition: string

  public computedClass: string

  ngOnInit() {
    this.computedClass = this.color ? `color--${this.color}` : `iconLabel--default`
  }
}

my icon-label.html:

    <div class="iconLabel {{computedClass}}">
  <div class="mi__wrapper">
    <i class="mi {{icon}}  "
       *ngIf="!iconPosition || iconPosition === 'left'">
    </i>
    <span class="iconLabel__Label"><ng-content></ng-content></span>
    <i class="mi {{icon}}"
       *ngIf="iconPosition === 'right'">
    </i>
  </div>
</div>

and my icon-label.scss:

    .iconLabel {
  @extend .label-5;
  padding: 6px 10px;
}

.iconLabel--default {
  @include font-color;
}

and i want add a size proprey for if the user write proprety small my class icon add this mi mi-user mi-2x for exemple

and i want my tag html is like that

<mae-icon-label icon="mi-user" [size]="large">Label</mae-icon-label>

how can be have that ?

thanks

Solution

After reading your comment, here is your solution

FOR THE HTML

<div class="iconLabel {{size}}">
  <div class="mi__wrapper">
    <i class="mi {{icon}}  "
       *ngIf="!iconPosition || iconPosition === 'left'">
    </i>
    <span class="iconLabel__Label"><ng-content></ng-content></span>
    <i class="mi {{icon}}"
       *ngIf="iconPosition === 'right'">
    </i>
  </div>
</div>

FOR THE COMPONENT

  import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit
} from '@angular/core'

@Component({
  selector: 'mae-icon-label',
  templateUrl: 'icon-label.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconLabelComponent implements OnInit {
  @Input() icon: string
  @Input() color: string
  @Input() iconPosition: string
  @Input() size: string

  public computedClass: string

  ngOnInit() {
    this.computedClass = this.color ? `color--${this.color}` : `iconLabel--default`
  }
}

CALL IT WITH

<mae-icon-label icon="mi-user" [size]="'large'">Label</mae-icon-label>

Answered By - user4676340