Extending of mdIcon source definition (for strings)

[maku]

Bug, feature request, or proposal:

Extending of mdIcon source definition (for inlined svg strings)

What is the expected behavior?

const iconAsSvg: string = '<svg>...</svg>'
mdIconRegistry.addSvgIcon('myicon', iconAsSvg);

or reference the svg string directly in md-icon:

<md-icon  [svgIconSrc]="iconAsSvg"></md-icon>

What is the current behavior?

Registering for svg's works only with an url:

mdIconRegistry.addSvgIcon(iconName: string, url: SafeResourceUrl): this

So you would be more flexible to provide svg resources (e.g. for libs etc.)

[mark-buer]

As a data point, I also found a need to provide the svg source directly to mdIconRegistry so as to hackily inline the svgs into the final app bundle.
Having something like mdIconRegistry.addSvgIconSource('myicon', iconAsSvg); would've saved much hassle. Even better would be if this bundling (via angular-cli) was built-in.

The lack of this capability can be worked around in one of a few unpleasant ways. The first is to provide a custom Http instance to the MdIconRegistry constructor (via injection). This custom Http instance will serve up fake content when requested. This seems nasty. Another approach is to extend the MdIconRegistry class, adding on the new methods and overriding the existing ones (if one didn't care about the existing behaviour of MdIconRegistry, one could not bother extending it and just throw exceptions on all unneeded methods). To illustrate this hack and to help out anyone wanting to do something similar:

inline-icon-registry.ts

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {MdIconRegistry} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
import {Observable} from "rxjs/Observable";

@Injectable()
export class InlineIconRegistry extends MdIconRegistry {

    private _mbIconIdToSource: Map<string, SVGElement> = new Map();

    constructor(http: Http, sanitizer: DomSanitizer) {
        super(http, sanitizer);
    }

    mbAddSvgIconSource(iconName: string, source: string): this {
        const svgElement = this._mbCreateSvgElementForSingleIcon(source);
        this._mbIconIdToSource.set(`:${iconName}`, svgElement);
        return this;
    }

    mbAddSvgIconSourceInNamespace(namespace: string, iconName: string, source: string): this {
        const svgElement = this._mbCreateSvgElementForSingleIcon(source);
        this._mbIconIdToSource.set(`${namespace}:${iconName}`, svgElement);
        return this;
    }

    getNamedSvgIcon(name: string, namespace?: string): Observable<SVGElement> {
        const iconId = `${typeof namespace === "string" ? namespace : ""}:${name}`;
        if (this._mbIconIdToSource.has(iconId)) {
            return Observable.of(this._mbIconIdToSource.get(iconId)!.cloneNode(true));
        }
        return super.getNamedSvgIcon(name, namespace);
    }

    /**
     * Duplicated from MdIconRegistry to avoid hackily invoking a private method.
     */
    private _mbCreateSvgElementForSingleIcon(responseText: string): SVGElement {
        const svg = this._mbSvgElementFromString(responseText);
        this._mbSetSvgAttributes(svg);
        return svg;
    }

    /**
     * Duplicated from MdIconRegistry to avoid hackily invoking a private method.
     */
    private _mbSvgElementFromString(str: string): SVGElement {
        const div = document.createElement("DIV");
        div.innerHTML = str;
        const svg = div.querySelector("svg") as SVGElement;
        if (!svg) {
            throw new Error(`cannot create`);
        }
        return svg;
    }

    /**
     * Duplicated from MdIconRegistry to avoid hackily invoking a private method.
     */
    private _mbSetSvgAttributes(svg: SVGElement): SVGElement {
        if (!svg.getAttribute("xmlns")) {
            svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        }
        svg.setAttribute("fit", "");
        svg.setAttribute("height", "100%");
        svg.setAttribute("width", "100%");
        svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
        svg.setAttribute("focusable", "false");
        return svg;
    }
}

app.module.ts

import "hammerjs";

import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {MaterialModule, MdIconRegistry} from "@angular/material";
import {BrowserModule} from "@angular/platform-browser";

import {AppRoutingModule} from "./app-routing.module";
import {AppComponent} from "./app.component";
import {InlineIconRegistry} from "./inline-icon-registry";


@NgModule({
    declarations: [
        AppComponent,
        // etc
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        MaterialModule,
    ],
    providers: [
        // Use our inline registry instead of the default
        {provide: MdIconRegistry, useClass: InlineIconRegistry},
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

some-random.component.ts

import {Component} from "@angular/core";
import {MdIconRegistry} from "@angular/material";

import {InlineIconRegistry} from "../inline-icon-registry";


declare function require(s: string): string;


@Component({
    selector: "mb-some-random",
    providers: [],
    templateUrl: "./some-random.component.html",
    styleUrls: ["./some-random.component.css"],
})
export class SomeRandomComponent {

    constructor(iconRegistry: MdIconRegistry) {
        if (iconRegistry instanceof InlineIconRegistry) {
            const namespace = "some-random";
            iconRegistry.mbAddSvgIconSourceInNamespace(namespace, "play", require("!!raw-loader!./play.icon.svg"));
            iconRegistry.mbAddSvgIconSourceInNamespace(namespace, "pause", require("!!raw-loader!./pause.icon.svg"));
        }
    }
}

This seems to work well enough, but it does feel a bit fragile.

[kuhnroyal]

Can't you use a data url? Works for me.

const svg = "<svg>...</svg>";
const url = this.sanitizer.bypassSecurityTrustResourceUrl(encodeURI("data:image/svg+xml," + svg));
this.matIconRegistry.addSvgIcon("foo", url);

[mark-buer]

@kuhnroyal Nice idea! Far less of a hack than the approach I posted.

Downsides of the dataurl approach are that MatIconRegistry caches the SVG content by URL, and the unnecessary async XHR to "fetch" the data URI. Neither issue seem serious if you've only got a small number of smallish icons.

More seriously, it might be an issue on older Safaris (older mobile devices would be of particular concern)?
If anyone wants to use this approach I'd suggest they test it against their minimum supported target devices to ensure it works as expected.

I'd still like to see a method of adding the content of an icon directly to the registry.