Font Awesome and Material Icons used in ngFor (Angular 2) - css

Question

I have a dynamic list of Icons that are displayed in a right side bar. The Icons are passed into the sidebar depending on what the user does. This dynamic array of icons is displayed using ngFor.
Unfortunately, some of the icons are from Font Awesome and some are from Google Material.
<!--Font Awesome-->
<i class="{{myIcon}}"></i>
<!--Material-->
<md-icon>{{myIcon}}></md-icon>
<!--Or-->
<i class="material-icon">{{myIcon}}</i>
Seeing that they are not an exact match, how do you get them to display both kinds using an ngFor with nothing but the string of the icon's name.

Answer 1

I have a solution for you. I just implemented exactly this.
Now I know you asked for just what goes between the *ngFor to dynamically select and render the appropriate icon based on the icon string, but I am going to document the complete solution including getting font awesome registered, for others.
Let us start at the top by making sure you have font awesome css included in your header. You can have fontawesome email you a link to their CDN version here http://fontawesome.io/get-started/ and include this in your header.
<script src="https://use.fontawesome.com/c26638a4cc.js"></script>
Next create and register an alias for fontawesome in your app.module. You can do this by first importing these:
import { MdIconModule, MdIconRegistry } from '#angular/material';
Don't forget to include MdIconRegistry in your providers
providers: [
...
MdIconRegistry,
...
],
Then let us register fontawesome with MdIconRegistry in our AppModule like so..
constructor(...,
public mdIconRegistry: MdIconRegistry) {
mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
...
}
What we have done so far allows us to use font awesome icons in our application as follows:
<md-icon class="some-class" fontSet="fa" fontIcon="fa-trophy"></md-icon>
Now let us answer the original question i.e. how to dynamically display either a material design icon or a font-awesome icon based on just the icon string.
To do this, I am going to rely on font-awesome icons starting with a 'fa-' prefix. If we are good with this, then I can check for 'fa-' and use that to set fontSet and fontIcon appropriately.
<md-list-item *ngFor="let menuitem of menuList">
<button md-button ...>
<md-icon [fontSet]="menuitem.icon.substr(0,3) === 'fa-' ? 'fa' : ''"
[fontIcon]="menuitem.icon.substr(0,3) === 'fa-' ? menuitem.icon : ''"
[ngClass]="{'your-fa-custom-class': true }">
<span>{{ menuitem.name }} </span>
</button>
ngClass includes .your-fa-custom-class where you can change the font-size for your font awesome icons specifically.
You are all set!