CODEWITHSUNDEEP
angularangular-materialangular-elements
Alexander Taylor
Alexander Taylor

Reputation: 17642

Angular Elements: dependency on Material

I'm creating an Angular Element to be used in other projects. The element is a component containing Angular Material components in its template, so ultimately my element requires that the page to <link> a Material theme CSS file (and material icons and material fonts files, and the link tag can only appear in the document's <head>).

It would be great to say all that's needed is call platformBrowser().bootstrapModuleFactory(...) and write <some-custom-element> on the page with no further instruction. Is that possible?

Is it acceptable to require users of my custom element to link in all these CSS files in the <head> of their page? I suppose with this pattern, adding new dependencies later wouldn't be a backwards compatible change, and I'd have to tell everyone to add the new CSS files or make a new Custom Element.

Upvotes: 17

Views: 3819

Answers (2)

Simon Hansen
Simon Hansen

Reputation: 690

I was able to use Mat Icons by simply importing the font-family into the src/styles.scss.

@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

Upvotes: 1

Kyle Snell
Kyle Snell

Reputation: 81

You may need to set the encapsulation of the component to ViewEncapsulation.None.

@Component({
    selector: 'pay-button',
    templateUrl: './pay-button.component.html',
    styleUrls: ['./pay-button.component.scss'], //include material related css here
    encapsulation: ViewEncapsulation.Native
})

Upvotes: 2

Related Questions