Use local material icon with bower

Swiip · Aug 29, 2015 · 2c842d5 · 2c842d5
1 parent 0d20fab
commit 2c842d5
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/app/templates/_bower.json b/app/templates/_bower.json
@@ -42,6 +42,7 @@
     "angular-material": "~0.9.7",
 <% } if(props.ui.key === 'material-design-lite') { -%>
     "material-design-lite": "~1.0.4",
+    "material-design-icons": "~2.0.0",
 <% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%>
     "angular-bootstrap": "~0.13.0",
 <% } if(props.bootstrapComponents.key === 'angular-strap') { -%>

diff --git a/app/templates/gulp/_build.js b/app/templates/gulp/_build.js
@@ -60,6 +60,8 @@ gulp.task('html', ['inject', 'partials'], function () {
     .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/bootstrap/fonts/', '../fonts/'))
 <% } else if (props.ui.key === 'bootstrap' && props.cssPreprocessor.extension === 'styl') { -%>
     .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/bootstrap-stylus/fonts/', '../fonts/'))
+<% } else if (props.ui.key === 'material-design-lite') { -%>
+    .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/material-design-icons/iconfont/', '../fonts/'))
 <% } -%>
     .pipe($.minifyCss({ processImport: false }))
     .pipe($.sourcemaps.write('maps'))
@@ -96,6 +98,8 @@ gulp.task('images', function () {
 gulp.task('fonts', function () {
 <% if (props.ui.key === 'bootstrap' && props.cssPreprocessor.extension === 'styl') { -%>
   return gulp.src($.mainBowerFiles().concat('bower_components/bootstrap-stylus/fonts/*'))
+<% } else if (props.ui.key === 'material-design-lite') { -%>
+  return gulp.src($.mainBowerFiles().concat('bower_components/material-design-icons/iconfont/*'))
 <% } else { -%>
   return gulp.src($.mainBowerFiles())
 <% } -%>

diff --git a/app/templates/src/app/_material-design-lite/__material-design-lite-index.scss b/app/templates/src/app/_material-design-lite/__material-design-lite-index.scss
@@ -5,9 +5,45 @@
 // bower:scss
 // endbower
 
-@import url(http://fonts.googleapis.com/icon?family=Material+Icons);
 @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
 
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../bower_components/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../../bower_components/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../../bower_components/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
+       url(../../bower_components/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
 main {
   padding: 20px;
   background: #fafafa;

diff --git a/test/inception/test-inception.js b/test/inception/test-inception.js
@@ -151,7 +151,7 @@ describe('gulp-angular generator inception tests', function () {
     });
   });
 
-  describe('with [none, $http, new router, ngMaterial, Stylus, TypeScript, handlebars]', function () {
+  describe('with [none, ngResource, new router, ngMaterial, NodeSass, Javascript, HTML]', function () {
     before(function() {
       return inception.prepare({}, {
         jQuery: prompts.jQuery.values.none,