Set CSS values using a value set on component selector (Angular 5)

Question

Here's what I want to to, below. Basically, I want to use mat-icon in angular/material to access material icons, and dynamically size them using the ngStyle directive (or a better solution if available). I need the dynamic sizing (I think) because what I need to do is to set a circular 2px border around the mat-icon, and the size of that border is dependent on the size of the mat-icon's font-size property (e.g. a 36px icon needs a 72px border and a 38px border-radius). I'm still learning Angular/Material and how it all works, and what I don't want to do is hard-code a solution. Instead, if I can put a value in the component selector, then use that value as a variable that can be assigned to CSS properties (e.g. through ngStyle), things work out.

Note: The following code below is 1/2 working, but in console (the log) I'm getting undefined and undefinedpx for the values.

EDITED: Current Code

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

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputSize: string;
  private fontSize = this.inputSize + 'px';

  constructor() {
    console.log(this.inputSize);
    console.log(this.fontSize);

   }

  ngOnInit() { }

}

//component.html

<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'font-size': fontSize, 'background-color': background_color }">
  <mat-icon>business</mat-icon>
</div>

//parent component.html
<div class="icon-container flex is-column align-center">
  <app-circle-icon-container inputSize="300"></app-circle-icon-container>
</div>

Answer 1

OK it's working now, using the following:

//component.ts
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputsize: string;
  @Input() backgroundcolor: string;
  public fontSize: string;
  public backgroundColor: string;

  constructor() {

   }

  ngOnInit() {
    console.log(this.inputsize);
    this.fontSize = this.inputsize + "px";
    const sizeContainer = (input) => {
      let container = parseInt(input);
      container = container * 2;
      console.log(container);
      return container;
    }
    const sizeContainerRadius = (input) => {
      let container = parseInt(input);
      container = container*2;
      container += 2;
      console.log(container);
      return container;
    }
    this.containerSize = sizeContainer(this.inputsize) + "px";
    this.backgroundColor = this.backgroundcolor;
    this.radiusSize = sizeContainerRadius(this.inputsize) + "px";
   }

}

//component.html
<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'width': containerSize, 'height': containerSize, 'border-radius': radiusSize }">
  <mat-icon [ngStyle]="{ 'font-size': fontSize, 'background-color': backgroundColor }">business</mat-icon>
</div>

//parent component.html
<app-circle-icon-container inputsize="300" backgroundcolor="#405e7c"></app-circle-icon-container>