Description
Bug, feature request, or proposal:
Proposal
What is the expected behavior?
Font awesome SVG documentation should be improved.
What is the current behavior?
Ng Material FA docs are limited and don't demonstrate SVG best practices. Font awesome imports of SVGs use their own custom object which breaks down the SVG/XML and represents it as an object, Ng Material expects the complete XML to be added to its registry.
This native SVG usage is preferred because Ng Material has very specific CSS styles that make embedding icons as children of mat-icon element not work as expected, this documentation can be improved so 3rd party icons work seamlessly with material.
i.e. embedding the font awesome icon can be done as:
<button mat-menu-item> <mat-icon><fa-icon [icon]="faGoogle"></fa-icon></mat-icon> <span>Google</span> </button>
... this is the 'default SVG way' if you follow FA docs, it produces an additional FA wrapper element which is undesirable as it also has it's own CSS embedded which does not always play nicely with materials.
It works best as:
<button mat-menu-item > <mat-icon svgIcon="fab:google"></mat-icon> </button>
What is the use-case or motivation for changing an existing behavior?
Seamless FA + ng Material Icons integration example.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Latest
Suggested Doc
Suggestion Example code for using FA+ng Material Icons:
Add tree shakable Imports:
import { faGoogle } from '@fortawesome/free-brands-svg-icons';
`iconService.addSvg(faGoogle); // add icon to library`
HTML usage:
<mat-icon svgIcon="fab:google"></mat-icon> or <mat-icon svgIcon="google"></mat-icon>
Add helper service:
`
@Injectable()
export class IconService {
constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) { }
addSvg(icon: IconDefinition) {
// need to re-assemble the SVG XML
const svg =
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}"><path d="${icon.icon[4]}" /></svg>; // use template strings
// consider adding a duplicate check here so you don't do this twice
this.iconRegistry.addSvgIconLiteralInNamespace(
icon.prefix, // prefix here is optional, implement as needed
icon.iconName,
this.sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
`