title: Set CSS values using a value set on component selector (Angular 5)
body: <p>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. </p>
  
  <p>Note: The following code below is 1/2 working, but in console (the log) I'm getting 
  <code>undefined</code> and <code>undefinedpx</code>
  for the values. </p>
  
  <p><strong>EDITED: Current Code</strong></p>
  
  <pre><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
  
  &lt;div class="flex center align-center circle-icon-container" [ngStyle]="{ 'font-size': fontSize, 'background-color': background_color }"&gt;
    &lt;mat-icon&gt;business&lt;/mat-icon&gt;
  &lt;/div&gt;
  
  //parent component.html
  &lt;div class="icon-container flex is-column align-center"&gt;
    &lt;app-circle-icon-container inputSize="300"&gt;&lt;/app-circle-icon-container&gt;
  &lt;/div&gt;
  </code></pre>