如何使用 Angular 材料（如 Angular.io/resources 网站）插入社交图标？

Question

I've installed Angular Material and have been able to use the icons by simply importing the material module and using the mat-icon element:

<mat-icon>mood</mat-icon>

However I would like to use the social icons like the one on the angular.io/resources site.

When I inspect the element it seems they are drawing an svg using the path element's d attribute value, however I'm not sure how the Angular community usually gets these data values, is there a standard resource developers use rather than the tedious task of drawing it out themselves? At the moment I just resort to copying and pasting the d value lol, however I'm wondering if there's a more practical approach developers use.

Answer 1

Create a svg file (inkscape, illustrator) or download it and register it like this in a service:

@Injectable({providedIn: 'root'})
export class MaterialIconsService {
    constructor(private iconRegistry: MatIconRegistry,
                private sanitizer: DomSanitizer) {
        this.iconRegistry.addSvgIcon('my-icon', this.sanitizer.bypassSecurityTrustResourceUrl('assets/path/my-icon.svg');
    }
}

Then you can use in it in your html

<mat-icon svgIcon="my-icon"></mat-icon>

More information here:https://material.angular.io/components/icon/api#MatIconRegistry

Answer 2

All the Material icons are open source.

1. Go to the Material Icons site.
2. Click on an icon.
3. Click on the SVG download link at the bottom left of the page.

Alternatively click on the link to "git repository". Where you can browse the source repo and download some or all of the icons.