Use of different custom icons

[gpbl]

Looking into icon.jsx we are constrained to use classes beginning with mdfi_ or mui-icon. In one of my projects, I need to use my own set of custom icons and I don't need the default ones.

I believe the reason for this is to avoid prefixing the "default" material-design icons with mdfi_, and just use the icon name after the prefix. This makes the component unusable and I'm forced to use <span>. I'm also fine with that, but a better solution would to actually use a prefix, which I'd change to md-icon.

A related issue is that the dropdown menu uses it, requiring to import the whole font just for one icon.

[hai-cea]

@gpbl The mdfi_ icons come from material-design-fonticons. I imagine these class names will change once google releases their official font icons from google/material-design-icons.

I think you should be able to prefix your icons with mui-icon and things should work?

[gpbl]

If the class names are expected to change, it is even more reasonable to keep the mdfi_ prefix.

Anyway I don't agree with the idea of altering the class name in the icon component: it does not bring any benefit – it just makes hard to use the framework in our own architecture.

Personally I would keep the icons out of this repo and let the users choose their owns. In the case of material-design-fonticons, users may just add it as npm dependency: mdf is made so that we can even choose which category to include. This is important to reduce the size of the final CSS.

Well this is where I'm headed with the Sass port, but that icon.jsx and the need of the whole font just for the dropdown blocked me, since here I would need to change the jsx sources.

... just my feedback: I'd love to adopt material-ui in my own projects :-)

[hai-cea]

Yes, I agree with everything you've said. :)

We do need a way for users to pick and choose which icons they need. I think this is something we can work on in the future.

Now the 2nd issue you brought up with the dropdown menu is a good one. Maybe we should move all icons used by MUI into the mui custom font file? That way it's not referencing the icon in mdfi.

What do you think about this idea?

[gpbl]

👍

I'm for keeping out any icon font :-) For the dropdown menu I'd use a data-uri with an SVG, so to exclude the need of the font at all. Do you support IE8?

I'm working on a project where I try to adopt your framework, I may send a PR soon with that.

[hai-cea]

Oh I like the SVG idea. 👍

[hai-cea]

Here's what we're waiting on before we change the icon component to use different classNames. google/material-design-icons#1

[hai-cea]

We're 1 step closer to this with this commit:
3c752cb

[gpbl]

Loving the idea of the svg icons in react :-) thanks !