Possible to use Font Awesome icons with the Fluent UI components?

[lassevk]

I would like to use icons from other sources than the Fluent UI, together with the Fluent UI components, but since all of the components have to be wrapped in an Icon type, I would need to create a descendant of this type that wraps the html to use for FA icons instead.

However, I imagine I'm not the first one to ask about this, so I am wondering if this is supported out of the box somehow, or if there is a nuget package that adds the FA icons as Icon types?

[lassevk]

I managed to use icons from Font Awesome with this:

public static class FontAwesome
{
    public static Icon Icon(string iconName) => new Icon(iconName, IconVariant.Regular, IconSize.Size16, $"<span class=\"fas {iconName}\"></span>");
}

and then use it like this:

<FluentNavLink Icon="@(FontAwesome.Icon("fa-lock"))" Href="/authenticated" Text="Authenticated">Authenticated</FluentNavLink>

[webluke]

This worked out great. I did use the full class in the iconName property as some are 'fas' and others such as brand icons are 'fab' and this added more flexibility.

[Batmurt]

Thank you for sharing @lassevk, I followed your pattern and added some mdi fonts using iconify:

csharp readonly Icon windfarmIcon = new Icon("turbine", IconVariant.Regular, IconSize.Size24, $"<span class=\"iconify text-fluent-blue\" data-icon=\"mdi-wind-turbine\"></span>");