CODEWITHSUNDEEP
angularangular-material
Angel Angel
Angel Angel

Reputation: 21658

How to use svg images on button in MD (md-icon)

I have tried this form and it does not work:

<button md-icon-button color="primary">
  <md-icon md-svg-src="./assets/img/sprites.svg">menu</md-icon>
</button>

and this:

<md-icon svgSrc="./assets/img/sprites.svg">menu</md-icon>

How can i put svg images on the buttons.

Update:

I'm looking at this, 

<button md-icon-button color="primary">
<img src="./assets/img/sprites.svg" style="max-width:25%"/>
</button>

but I do not know if it will be the right way.

Upvotes: 2

Views: 3983

Answers (1)

StephaneM
StephaneM

Reputation: 4899

Somewhere in your code inject the MdIconRegistry:

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

constructor(
    private mdIconRegistry: MdIconRegistry,
    private sanitizer: DomSanitizer) {
...

later on register your svgs (ngOnInit() is a good place):

ngOnInit() {
    this.mdIconRegistry.addSvgIconInNamespace('img', 'sprites',
        this.sanitizer.bypassSecurityTrustResourceUrl('/assets/img/sprites.svg'));
}

Then in your component you can use your svg:

<md-icon svgIcon="img:sprites" color="primary"></md-icon>

Upvotes: 5

Related Questions