0

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.

ed-tester
  • 1,596
  • 4
  • 17
  • 24
  • You just use a common parent to select all the `.fa`s or ``/`.material-icon`s in it and modify their properties to match the other ones. Probably the easiest route is to apply `font-size` to `.some-parent .fa{}`. It basically depends on which ones are the right size... :) – tao Mar 15 '17 at 20:38

1 Answers1

5

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!

Vijay Sarathy
  • 71
  • 7