Components: Material Icons with Font Awesome SVG

[tomgruszowski]

feature request:

Improve docs on integrating Material and Font Awesome SVG.

What is the use-case or motivation for changing an existing behavior?

Angular Material Icons set is lacking many icons found in Font Awesome but FA font is bulky, however, recent FA updates provide tree shakable angular implementations. see angular-fontawesome.

It would be incredibly beneficial to have some example documentation of how to register these SVG icons. I realize there is a lot of verbiage already I find it a bit confusing on how to use this; the current 'example' tab on icons section is lacking. Current documentation <mat-icon fontSet="fa" fontIcon="alarm"></mat-icon> assumes user is using the entire FA font, which defeats the purpose of tree shaking and SVG.

[jelbourn]

You should be able to use fontawesome svgs the same as any other svg (registering w/ MatIconRegistory and then referencing via the svgIcon property). Is there something about that that doesn't work?

[tomgruszowski]

I realize it you're on home stretch of v6, but afterwards, if you look at the 'example' tab on Icons section and compare it to the 'overview' it's quite thin.

I guess I'm a bit confused how I'd go from:

import { faUserPlus } from '@fortawesome/pro-solid-svg-icons';

and add that to material registry via:

iconRegistry.addSvgIcon( 'thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));

I'm going to answer my own question, it looks like I want the SVG Sprites from their manual download and forgo this angular-fa library (except for maybe animations and effects). Then just copy the assets my app will use into my angular app, and add it to the iconRegistry.

FA svg-sprites

Having said that, I think this recent angular-fontawesome library is incredibly compelling due to tree shaking and having a comprehensive example for arguably the most popular font library out there is beneficial to this awesome component lib. Thanks

[tomgruszowski]

Can we add the icon via SVG string and not just the URL.

import { faUser } from '@fortawesome/pro-solid-svg-icons';

iconRegistry.addSvgIcon( 'user', faUser.icon[4] /* raw SVG property of imported icon */)

I see that IconRegistry has a _createSvgElementForSingleIcon(responseText) method. Font awesome icons using the angular library has the following properties:

export interface IconDefinition extends IconLookup { icon: [ number, // width number, // height string[], // ligatures string, // unicode string // svgPathData ]; }

Ideally I'd love to continue to use FA library and pass those references to mat-icon vs having to manual curate sprites asset files. In addition mat-icons cant do everything that FA library can (i.e. spin or transition).

[jelbourn]

This was actually added in #10757 and will be in the 6.0 release

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}