angular4中引入svg

阿里icon

直接放入assets文件夹后
html引入即可

<div>
    <img src="yourIcon.svg">
</div>

注意：
根位置是index.html文件所在的位置

---

动态更改svg

可以使用ngStyle指令

<circle [ngStyle]="{stroke:stroke, fill: fill}" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouseover)="func1()"/>

或

<circle [style.stroke]="stroke"
        [style.fill]="fill" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"    
    (mouseover)="func1()"/>

在angular中 尽量避免使用jquery

---

引入font-awesome

There are 3 parts to using Font-Awesome in Angular Projects

Installation
Styling (CSS/SCSS)
Usage in Angular
Installation

Install from NPM and save to your package.json

npm install --save font-awesome

Styling If using CSS

Insert into your style.css

@import '~font-awesome/css/font-awesome.css';

这里写代码片

Styling If using SCSS

Insert into your style.scss

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Usage with plain Angular 2.4+ 4+

<i class="fa fa-area-chart"></i>

结合Material一同使用

In your app.module.ts modify the constructor to use the MdIconRegistry

export class AppModule {
  constructor(mdIconRegistry: MdIconRegistry) {
    mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

and add MdIconModule to your @NgModule imports

@NgModule({
  imports: [
    MdIconModule,
    ....
  ],
  declarations: ....
}

Now in any template file you can now do

<md-icon fontSet="fontawesome" fontIcon="fa-area-chart"></md-icon>

单独使用material

index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">