Include default Google Material Design Iconsets in Material Design source OR by default

[nkoterba]

So the new md-icon directive is an excellent addition.

However, it's frustrating that by default the core set of Google material design icons are not included as available icon sets.

From the md-icon demo two iconsets (core and social) are provided.

But it would be nice if as part of the material-design source a complete set of iconsets matching the Google Material Design Icon set were included.

I'm sure there are more clever or user-friendly ways (like having an option on $mdIconProvider to use defaults much like the $themeProvider) etc. But for now even including a complete collection of iconsets that I can register with the $mdIconProvider manually would be super helpful!

Or perhaps this is an issue that I should create with the Google Material Design Icon project?

[nkoterba]

To whoever else may stumble upon this post, I've created the necessary iconsets and they can be found on material-design-iconsets.

Hopefully, these will be eventually included in the Material Design source.

[jwmay2012]

+1

[nkoterba]

As an FYI, I've updated my repo above to build the iconsets from the Google Material Design icons github project.

It's not elegant but it pulls down the latest icons, and transforms them into iconsets usable by Angular Material Design.

[eseceve]

+1

[nkoterba]

Based on a comment left by @ThomasBurleson on an issue at the project I created and linked to above, it sounds like a default set of font-faces may be included in upcoming releases of angular-material. His comment.

@ThomasBurleson When I originally looked at creating my iconsets, I considered font-faces. I was going to use one of the many npm libs out there to convert the .svg into font-faces. But then I came across this web article and I thought perhaps svg was the right way to go: (https://css-tricks.com/icon-fonts-vs-svg/).

Since we plan to use Material Design in our apps that will be showing on Retina and high-resolution displays I'm concerned that font-faces will be blurry or not as sharp as the svg-based md-icon.

Is it possible to include a default SVG iconsets as well as the font-faces?

[epelc]

@ThomasBurleson I'm using google's material icon project with my app. Maybe the following gulp task can help if you want to make the filename/directory layout nicer.

This uses the 24px svg's change the src glob if you want a different size.

var path = require('path')
var replace = require('gulp-replace')

gulp.task('material-icons', function() {
    return gulp.src('bower_components/material-design-icons/**/svg/production/*24px.svg')
        // Convert file paths like /action/svg/production/ic_account_balance_wallet_24px.svg to /action/account-balance-wallet.svg
        .pipe(rename(function(p) {
            // Use path.normalize so it works on windows/linux/osx
            p.dirname = p.dirname.replace(path.normalize('svg/production'), '')
            p.basename = p.basename.split('_24px')[0]
            // I dont like underscores
            p.basename = replaceAll(p.basename, '_', '-')
            p.basename = replaceAll(p.basename, 'ic-', '')
        }))
        .pipe(gulp.dest('dist/icons/material'))
})

I find that the material icon project is very slow to copy(even from a local bower cache). I think the problem is there are several thousand files and the whole project is about 40-50mB. I'd recommend copying the svg's your using to a second project to get around this. This is probably only an issue if your using a ci server though.

[morgs32]

I took after @ThomasBurleson but wanted to create iconsets to use with $mdIconProvider as seen here: https://material.angularjs.org/latest/#/api/material.components.icon/service/$mdIconProvider

Here is the gist: https://gist.github.com/morgs32/0b12dc6cda8054b44f71

[ThomasBurleson]

We are waiting for Google IO to finish before we update our support for Material Icons.

[nkoterba]

@naomiblack So does this mean future versions of MD will have the iconsets included?

[ThomasBurleson]

@nkoterba - Similar to our online docs, you should just link to the online font resources:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

[ranbuch]

I've added this inside my tag:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"\>


and tried to use an icon like this:

but I'm getting "icon navigation:menu not found" console warning and can't see the icon.
I'm using angular-material version 0.11.4.

what am I doing wrong?

[kuhnroyal]

I don't think the Roboto font contains any icons.

[ranbuch]

my mistake, I meant this one:
https://fonts.googleapis.com/icon?family=Material+Icons

[ranbuch]

Anyway that code works for me:

menu


[brenotx]

+1

[mortware]

+1