Any chance someone knows how to get MD Icons to show?
I have my gulp file generating the Material Icons files in eot, woff, woff2, svg, and ttf formats placed in www/build/fonts.
I then added the material-icon class and the source to the app.core.scss.
@font-face {
font-family: ‘Material Icons’;
font-style: normal;
font-weight: 400;
src: url(…/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local(‘…/fonts/MaterialIcons-Regular.eot’)
}
.material-icons {
font-family: ‘Material Icons’;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* 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’;
}
And I call the icon in the template with <i class="material-icons">face<i>
This is per the developers guide.
All I see is “face”.
I don’t really want to install the node-module because it has a bunch of .png’s which I don’t need. Thats why I have only the files listed above.
Thanks for any help,
Andrew
V2 includes material versions of the icons, based off the official material design icon set.
Take a look, they include just about everything you’ll need.
1 Like
Thanks @mharington! I ask only because the app we are building should have the same look and feel as the main site, and one of those aspects includes icons, some not available through the ion-icons.
Any chance of getting more in future releases?
Sure, we can add some icons. Just open an issue on the ionicons repo and we can get them in there.
I opened an issue! Forgot to mention though that we also want the same naming pattern of icons from web to app.
But in the meantime I am successfully using the Material Design Icons in Ionic2.
Just delete src: local('../fonts/MaterialIcons-Regular.eot') from the above code and call the desired icon with the above <i class="material-icons"> element.
You then should have access to all of the Material Design Icons.
gulpfile.js
gulp.task('watch', ['clean'], function(done){
runSequence(
['data','sass', 'html', 'fonts', 'customFonts', 'scripts'],
function(){
gulpWatch('app/data/*.json', function(){ gulp.start('data'); });
gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
buildBrowserify({ watch: true }).on('end', done);
}
);
});
gulp.task('build', ['clean'], function(done){
runSequence(
['data', 'sass', 'html', 'fonts', 'customFonts', 'scripts' ],
function(){
buildBrowserify({
minify: isRelease,
browserifyOptions: {
debug: !isRelease
},
uglifyOptions: {
mangle: false
}
}).on('end', done);
}
);
});
// added this to gulp the MDIcons file located in app/md-icons/
gulp.task('customFonts', function () {
return copyFonts({
src: [
"app/md-icons/*.+(eot|ttf|woff|woff2|svg|ijmap)"
]
});
});
Kind of a side note, but is there a way to include custom icons? i.e. Is it possible to use custom images as icons in the tab bar?
@andrewgy8
Can you share the link for the issue?
I manage this using ion-icon instead i class="material-icons" element.
I think this could be better because it’s less work rewriting code if I decide to use ion icons set
Here is the source I use to archive this.
This is the css that allows use ion-icon with material-icons
ion-icon[material-icons]:before{
@extend .material-icons;
content: attr(name);
}
Install material-desgn-icons
npm install material-design-icons
Change gulpfile
gulpfile.js
// code hidden
gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
var fontOptions = {
src: ['node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
'node_modules/material-design-icons/iconfont/*.+(eot|ttf|woff|woff2)']
};
gulp.task('fonts', function() {
return copyFonts(fontOptions);
});
gulp.task('scripts', copyScripts);
// code hidden
Add to app.core.scss
app.core.scss
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../fonts/MaterialIcons-Regular.woff) format('woff'),
url(../fonts/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;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* 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';
}
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* Extends material-icons to ion-icon elements */
ion-icon[material-icons]:before{
@extend .material-icons;
content: attr(name);
}
With this code, it is possible to use:
ion-icon material-icons name="material icon set"
ion-icon name="ion icon set"
i class="material-icons"
2 Likes