Materialdesign: Add icon names to web site

[robertbrower]

It is extremely difficult to use the web site because the icon names are not shown. One must filter the list of icons. It would be very good if I could use my browser search instead of the less useful application search provided, but there is no text to search for. Please. Thanks.

[Templarian]

Will consider this, but some of the icon names are very long and it will cause issues with them getting clipped on the site. One other issue is that the site's search uses alias names also, so searching for say house shows the icon home.

http://cdn.materialdesignicons.com/1.5.54/ You can always search on this page, but you probably are trying to see all the icons, not just the webfont.

[Templarian]

By the way, just out of curiosity what about the current search implementation do you find less useful? There might be another way to solve this to make it easier for users.

I will say, I'm apprehensive to make the change since I index the searches currently to find missing icons or aliases that need to be added. I can't collect this data if we use the built in browser search.

To put it in numerical form... there were 203,204 searches in the last 30 days.

[PeterShaggyNoble]

Would this be of any use to anyone? It was a sandbox project I was playing with as my designer was having fierce trouble finding the icons he wanted through the website & preview.html.

(Still very much a WIP, by the way, I hadn't taken into account the amount of work that would be involved!)

^{Search helpers: houseofdesign house of design icon overview}

[Templarian]

@PeterShaggyNoble That is really nice, if the alias data is useful it is included in the http://cdn.materialdesignicons.com/1.5.54/meta.json file that is used for 3rd party applications. This file is also the only reference to the unique GUID ids for each icon. Eventually I want to include categories/tags in this file (#618).

I'm coding in EMF export at the moment, but categories are really high on the request list after the PowerPoint add-in is complete (was actually kind of shocked how many wanted a PowerPoint add-in).

[robertbrower]

Thanks. Like I said, I use the icons extensively. I'm thankful to all the
contributors. But it is hell on earth finding what I need. You could put a
list along the side of the page with just the names that when you click on
a name, it pastes it into the search. Thanks.

Robert

On Thu, Apr 28, 2016 at 5:55 PM, Austin Andrews [email protected]
wrote:

Will consider this, but some of the icon names are very long and it will
cause issues with them getting clipped on the site. One other issue is that
the site's search uses alias names also, so searching for say house shows
the icon home.

http://cdn.materialdesignicons.com/1.5.54/ You can always search on this
page, but you probably are trying to see all the icons, not just the
webfont.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/Templarian/MaterialDesign/issues/1200#issuecomment-215475467

[robertbrower]

a list of class names somewhere would be very helpful. when I am looking at
the current page, my eyes almost cross because of the grid-ness of all the
icons. Today I was searching for 'fast' thinking about "fast forward"
because I wanted that icon. I also tried 'last' when I thought about prev,
next, first, last, common buttons you see on the bottom of a data table for
example. Turns out the class name includes the word 'chevron'. Try to
remember that the icons web page should be useful even to people who are
not English speakers. just thought I would give you my latest difficult use
case. Thanks guys!

On Thu, Apr 28, 2016 at 8:19 PM, Robert Brower <
[email protected]> wrote:

Thanks. Like I said, I use the icons extensively. I'm thankful to all the
contributors. But it is hell on earth finding what I need. You could put a
list along the side of the page with just the names that when you click on
a name, it pastes it into the search. Thanks.

Robert

On Thu, Apr 28, 2016 at 5:55 PM, Austin Andrews [email protected]
wrote:

Will consider this, but some of the icon names are very long and it will
cause issues with them getting clipped on the site. One other issue is that
the site's search uses alias names also, so searching for say house
shows the icon home.

http://cdn.materialdesignicons.com/1.5.54/ You can always search on this
page, but you probably are trying to see all the icons, not just the
webfont.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/Templarian/MaterialDesign/issues/1200#issuecomment-215475467

[Templarian]

@robertbrower I need to spend some time to update the tag system, we are very behind on tagging icons, and I think this is the feature you're talking about. If you expand the tag section you can filter by the tags.

While you're searching for icons and you type something and don't find an icon, please let us know. Even if we close out the issue since it exists with another name we can add an alias to the icon so others don't get confused searching (at the scale of this project you're not the only one I'm sure searching for it).

That chevron example is a really good, but an instance where we matched naming with Font Awesome to make the transition to MDI easier (and fast-forward in English is used exclusively for media controls). house <-> home is an example where we would add an alias though. There are a lot of synonyms to cover.

[PeterShaggyNoble]

Thanks for that meta file, @Templarian. I see a good few aliases/keywords I'd missed, will add them in with the next update.

[CoDEmanX]

@PeterShaggyNoble: I love your sandbox! Very material, and very snappy searches.

Two things I noticed:

• phone-minus displays the pot icon?!
• at the end of every category, the items of the last row are spread evenly over the entire horizontal space, which looks odd, because they fall out of the grid:

I can get them aligned if I disable the flex-box rule (1 1 20%), and nothing else seems to be affected.

[michahell]

It is indeed really hard to figure out what icons are supported and which are not. I had to manually search the CDN CSS to find out that not all icons that material design provides are supported out of the box.
Big props to making new icons, but it should be clear that this is not a drop-in replacement for the _material-design-icons_ bower install. Maybe provide this info on the GitHub readme ?

Case in point : the add_box icon is available for use in material-design-icons, but not here.
Finally, I went with https://github.com/jossef/material-design-icons-iconfont which is not as popular as this, but it does what it says it does. perfect drop-in for the otherwise unneccesarily huuuge standard material-design-icons library.

[CoDEmanX]

See #420

[PeterShaggyNoble]

Thanks for the feedback, @CoDEmanX, glad you like it. I've updated phone-minus to the correct icon now, looks like it was just a simple typo rather than a mix-up.

The spacing on the last line has been annoying me too; one of the limitations of flexbox. I've tried a few different solutions and workarounds but, in each case, I've found the insconsistent spacing to be the lesser of two evils. For example, without using flexbox, as you suggested, the child elements can't grow to fill the available space, creating an excess of white space to the right.

[Templarian]

I need to generate a meta.json for the 1.6.50 CDN. Just noticed I never uploaded it after doing the release.