title: Set attribute on dynamically created Custom component in Angular
body: <p>I have a component belonging to a custom library: </p>
  
  <pre><code>&lt;my-icon&gt;
  </code></pre>
  
  <p>In order to have the icon, I should set the property <code>[name]</code> of this component. Something like this: </p>
  
  <pre><code>&lt;my-icon [name]='warning'&gt;&lt;/my-icon&gt;
  </code></pre>
  
  <p>I am dinamically creating these icons with TypeScript: </p>
  
  <pre><code>if (myCondition) {
      let icon = &lt;HTMLElement&gt;document.createElement('my-icon');
  }
  </code></pre>
  
  <p>How should I set the property <code>[name]</code> in my variable <code>icon</code> in order to have the same result than above? 
  I've tried <code>icon.setAttribute('name','warning')</code> but it doesn't work (that sets the HTML attribute <code>name</code>, and not the input <code>name</code> of the underlying Angular component.       </p>