Materialdesign: New Website

[Templarian]

Note a website is being worked on by the core team and will be open sourced after the release.

More details will follow shortly.

Q. Will it be faster?
A. Significantly faster. It also works amazing on mobile.

Q. Will it work in IE11?
A. Nope.

Q. Tech Stack?
A. TypeScript + Web Components

Note: The dev.materialdesignicons.com is hosting some of the new site, but it's a mix of new/old as we move over pages.

[Templarian]

Screenshot of the global search (all icons, docs, guides, etc):

[IAmRGroot]

Will the new website also show the minimal version that is needed for each icon? That's the thing I miss the most on the current website.

[Templarian]

@Robert16296 Since the new site is built for offline, here is a snapshot of all meta data synced to the client. Release version is one of the properties (which means we can filter the page by version, but it won't reflect renames).

[valentingavran]

In which intervals are new versions released? Is there a fixed schedule?

And when can we expect the new website? ☄️👨🏻‍💻

[Templarian]

@valentingavran Good question. Right now we have docs / guides / views ready and a working on the CI/CD to replace what is on the dev box right now.

• Phase 1 Landing, icons, single icon view, docs / guides / contact.
• Phase 2 History page (shouldn't be too bad since all endpoint work is done).
• Phase 3 Export options

[sorinsi]

@valentingavran Good question. Right now we have docs / guides / views ready and a working on the CI/CD to replace what is on the dev box right now.

* Phase 1 Landing, icons, single icon view, docs / guides / contact.

* Phase 2 History page (shouldn't be too bad since all endpoint work is done).

* Phase 3 Export options

I can help with the new website, CI/CD and CDN if you need it.

[CodeDoctorDE]

Offline will be cool. And it's not perfect that the site has a lag if i open it. A new will be perfect 👍

[Templarian]

@sorinsi Back from vacation. Actually almost done with that portion. It's a lot of reuse of the old system. Hopefully have something partially up on the dev box shortly (it's where we handle the admin, so need to be careful not to break anything).

[sorinsi]

@sorinsi Back from vacation. Actually almost done with that portion. It's a lot of reuse of the old system. Hopefully have something partially up on the dev box shortly (it's where we handle the admin, so need to be careful not to break anything).

If you need help with anything just let me know, I have my email attached to the Github profile.

[Templarian]

Still very early, focused on fixing doc bugs and getting the remaining pages online still. CI is running again for any commit to master for the admin and site.

If you're subscribed to this issue please don't share as there is still a few weeks of work.

• https://dev.materialdesignicons.com/ (new stuff)
• https://dev.materialdesignicons.com/history (old stuff can be navigated to)
• fixing a bug in the new icon grid around column renders sometimes it glitches

[Templarian]

Update on the site's progress. All the documentation/guides pages have been updated to work on the new site. Even the more complex ones like our API documentation.

• Example doc page: https://dev.materialdesignicons.com/getting-started/bootstrap
• Working on fixing the grid component bugs right now.
• Initial wireup of icons pages: https://dev.materialdesignicons.com/icon/account

What can you do to help?

• Edit Documentation / Guides. Edit existing guides or create new ones.
• What do you want to see on the home page? Let us know.
• https://dev.materialdesignicons.com/contribute (Updated!)

[Templarian]

Took a small break from boring stuff to move the GitHub Icon Preview tool over.

• https://dev.materialdesignicons.com/contribute/github 👍

[Sjoerd82]

As for guide suggestions... I know that an Inkscape (or any other open source svg editor) tutorial, perhaps in conjunction with templates for some common design elements, would help me a great deal.

Templates could contain elements like the recurring "sub-icons" (like found on database-check, database-plus, etc.). We may not need templates for larger design elements, as icons can be downloaded as SVG and then edited; although I vaguely remember from an earlier attempt that this wasn't straight-forward with Inkscape, at least for me.

That's my 2¢

[Templarian]

@Sjoerd82 We're going to be building a library of cutouts / overlays in SVG / EPS format to make it easier for others to contribute them. We've gone back through almost every icon to standardize the cutouts / overlays (plus, minus, and many others). This gives us a good idea, but we'll need to detail what to do when a cutout makes the icon less recognizable and what can be done (there are some edge cases we handle).

We'll probably need to create a new section in the docs for each editor to explain the basics of editing vectors.

[Mancerrss]

Thank you for this!!!! Finally!!!

What about making our community website, as usable, responsive, fast and inline / alike with the official Material Design Icons design.

As they refused to open source that website & their icon set for the community.

So it's basically look like that website, but it

• Got alot more icons.
• Much easier, faster, responsive to use (essential for side to side working with IDE, design tools)
• We can build better search, tagging, more features like, multiple export / viewing tools unique to our own website.
• Support finally for our own icon set to support Filled, Outlined, Rounded, Two-tone & Sharp alternate icon sets styles.
• Some details, options on the website will link to Google's Material Design Icon guidelines, how to contribute to this open source icon set, or how to integrate this as an icon framework to your project. We can even make leaderboards or such, making contributions a bragging rights. Built in request system, integrated to GitHub?

If you agree with this approach, I could contribute on UX designing of the webpage.

[Templarian]

@Mancerrss You can start to see the UX path we're taking and adopting for the new site. Note these are all being built generically as the backend supports multiple icon packs (something this new site is being built for).

• Web Components: https://templarian.github.io/@mdi/components/
• ^ https://github.com/Templarian/MaterialDesign-Components
• Ex: <mdi-button> https://github.com/Templarian/MaterialDesign-Components/tree/master/src/mdi/button
• I'm fixing some bugs in our grid component, but any ideas will help.
  
  
  
  • The backend has an audit log for all contributor changes, so eventually we can show more. Right now primarily we list icons / total count associated to the user.
  
  

[dbybanez]

Thank you for the new website!

Question, is there going to be a feature to customize the icon? For example, the ability to change the width of the outline or make the icons look more rounded? Sorry, if this question has been asked but I couldn't find any references.

[Simran-B]

That's not possible. If the icons were stroke-based, then the outline width could be adjusted. But they are path based, i.e. a straight horizontal stroke is actually a very flat rectangle with four points.

Vector editing tools have path effects that allow you to round shapes, but the algorithms are unlikely to produce consistently good results. And in case of small icons in particular, readability/recognizability is key. To achieve that, it requires thought-out design decisions and some experimentation to get a good result.

Google's take on different icon styles is to provide 5 distinct types for their core set of icons:

• solid
• outline
• sharp
• round
• duo-tone

MDI only has solid and outline icons, although there is the less maintained MDI Light with very delicate strokes too. MDI does currently not pursue any major additions of new styles, namely sharp, round and duo-tone, see #4456

[ThomasKientz]

While waiting for the release of the new official website you can try https://mdisearch.com

[Templarian]

The server has been migrated to AWS. We were planning to do this, but were forced to do the migration early as our host was bought by GoDaddy.

I'll probably keep the repos linked to my account, but slowly moving previews and everything to our org:

• https://pictogrammers.github.io/@mdi/font/5.8.55/

[Templarian]

We are now redirecting all the CDN previews to the above GitHub pages. A lot of third party blogs/docs hardcoded links to the old CDN url.

Kind of random, but related to the server migration. Even though the old site is slow as a rock it's much snappier on the AWS hardware. While the new site uses rewritten endpoints they are also returning twice as fast. Probably a factor of updated hardware, framework, and database. That will definitely help as we break 6k icons.

[valentingavran]

We are now redirecting all the CDN previews to the above GitHub pages. A lot of third party blogs/docs hardcoded links to the old CDN url.

Kind of random, but related to the server migration. Even though the old site is slow as a rock it's much snappier on the AWS hardware. While the new site uses rewritten endpoints they are also returning twice as fast. Probably a factor of updated hardware, framework, and database. That will definitely help as we break 6k icons.

I feel a huge difference! It's hard to believe that this is only due to a server change. 🤯

[Templarian]

• There we archived and moved the repository for the new site:
  
  
  
  • https://github.com/Pictogrammers/Icon-Site
  
  
  • Issues that still needed work were moved over
  
  
  • Probably see a trend here where things are moving over to Pictogrammers. 👍
  
  
  • Bumped all of our dependency versions.
  
  
• Mostly focused on cleaning up existing components and wiring up logic for the new history page
  
  
  
  • https://dev.materialdesignicons.com/history
  
  
  • We need this component for the icon page and auditing changes in releases