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

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+

結合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

單獨使用material

index.html