Inner HTML of ng-container, Angular 4?

You can use ngTemplate:

<ng-template #buttonIcon>
    <div> Your html</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="buttonIcon">
</ng-container>

[outerHTML]

will do the trick to replace the outer element.

In your case

<div [outerHTML]="buttonIcon"></div>

It's true, that it's important to have a clean HTML structure for e.g. keeping CSS rules as simple as possible.

Related