I have the perfect solution for your problem. I recently tackled this exact issue.
Although you only inquired about the code needed between the *ngFor loop to dynamically choose and display the correct icon based on a string, I will provide a comprehensive guide including setting up Font Awesome for others who may need it.
Let's begin by ensuring that you have included the Font Awesome CSS in the header of your website. You can easily obtain a link to the CDN version from Font Awesome by visiting and adding it to your header section.
<script src="https://use.fontawesome.com/c26638a4cc.js"></script>
Next step is to create an alias for Font Awesome in your app.module file. Start off by importing the following:
import { MdIconModule, MdIconRegistry } from '@angular/material';
Don't forget to include MdIconRegistry in the list of providers.
providers: [
...
MdIconRegistry,
...
],
Now, proceed to register Font Awesome with MdIconRegistry inside AppModule as shown below:
constructor(...,
public mdIconRegistry: MdIconRegistry) {
mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
...
}
With these steps completed, you can use Font Awesome icons in your application like this:
<md-icon class="some-class" fontSet="fa" fontIcon="fa-trophy"></md-icon>
Moving on to address the original query which involves dynamically displaying either a material design icon or a Font Awesome icon based solely on the icon's string value.
In order to accomplish this, I will rely on the convention of Font Awesome icons starting with 'fa-'. If this approach works for you, we can check for 'fa-' and set fontSet and fontIcon accordingly.
<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>
The ngClass directive also allows the inclusion of .your-fa-custom-class where you can customize the font size specifically for Font Awesome icons.
That's all you need to do! Your setup is now complete!