Menu
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.
388
Angular Material supports customizing component styles via Sass API as described in the theming guide. This document provides guidance on defining custom CSS rules that directly style Angular Material components.
It integrates easily with Angular Projects because it is built with Angular structure. It can be incorporated with new or existing Angular Application despite the version. It provides tools for developers to build/customize their components. It speeds up the development process of building UI components from scratch.
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";
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
