How to get rid off multiple style tags inserted to head by AngularJS Material?

Question

AngularJS Material inserts multiple (around 30) style tags with md-theme-style attribute. I guess it's some kind of performance tuning but I would rather do it myself - I don't need an external framework to pollute my HTML in this nasty way. Any thoughts on how to get rid of the style tags?

Answer 1

I do not know if it is worth the hassle. Please back-up your work, I have not tested any of this:

Angular-material includes some default theme css as a const variable in JavaScript. You can view this code in angular-material.js at the bottom starting with the line:

angular.module("material.core").constant("$MD_THEME_CSS"...

When loaded into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:

git clone https://github.com/angular/material.git

Then install dependancies:

cd material
npm install

Then go to gulp/util.js and change line 53 from:

var jsProcess = series(jsBuildStream, themeBuildStream() )

to be:

var jsProcess = series(jsBuildStream)

Then run the build process:

gulp build

This question gives more detail: How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

Answer 2

Direct from the angular material docs

Lazy Generate Themes

By default, every theme is generated when defined. You can disable this in the configuration section using the $mdThemingProvider

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

Here's the exact syntax I used, and it worked like a champ. (Important to note this didn't break any style for us, either):

.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

It may also be useful to know this seems to be a standard for angular. I had to turn the animations down too. By default they were animating pretty much everything.