templarian/materialdesign-site

Site v2.0. This repo contains the site and admin, so little confusing.

ARCHIVED: Moved to https://github.com/Pictogrammers/Icon-Site

---

Material Design Icons - Site

The Material Design Icons project has been growing pretty quickly over the years and now has a large community behind it and is need of a new site.

Tech Stack

The public site and admin use two different tech stacks.

• Public Site: TypeScript, Web Components
• Admin: TypeScript, Angular, ngAngular (Bootstrap 4)

Running Site Locally

npm install

# Public Site
npm run start:site

The browser will launch...

Running Admin Locally

Clone the project and install angular-cli globally. This will handle running the Angular project.

npm install angular-cli --global
npm install

# Admin Site
ng serve

Goals

• Modern Browser support only (developer focused resource).
• Fully responsive design.
• Fast loading.
  • Load only required icons.
  • Minify all source.
  • Scrolling only renders SVG files in view.
• View icons by version of release.
• Separate help guides for each framework.
• Resource page
• Each icon has a unique page.
• Cleanly integrate the advanced export.
• Contributor pages editable by contributors.
• Emoji ranking on icons that may need a revision.
• Suggest an alias.
• More robust tagging of icons.

API Endpoints

To view all the documented endpoints please open src/content/api.md.

materialdesign-site's Issues

Guides - By Framework

In no specific order... each guide will be 100% self contained start to end.

• Edit Android
• Edit Angular
• Edit AngularJS
• Edit Bootstrap v3 / v4
• Edit Polymer
• Edit Webpack
• Edit Web - SCSS / Helper Classes

Contributors edit the list above, everyone else comment below for others.

Edit Markdown pages:
https://github.com/Templarian/MaterialDesign-Site/blob/master/src/content

Preview:
http://dev.materialdesignicons.com/getting-started/svg

To see all the pages that need help editing:
https://github.com/Templarian/MaterialDesign-Site/blob/master/src/content/sidebar.md

Ability to access public API

When trying to access a specific API (such as the Icon API), I keep getting this error:

Failed to load http://dev.materialdesignicons.com/api/icon/CD5DD59A-965F-455E-912B-9535BFD134E0: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Could the header on the resource be set as such? And also make the site be SSL-encrypted so that requests from another SSL-encrypted website will not be blocked by the browser.

Thanks.

Locally Store Icons for Quicker Loading

Use IndexedDB to store all icon related date and run a delta to retrieve new icons + metadata.

There are way too many icons with far too much SVG data. This needs to be cached.

• IndexedDB storage
• Small hash to track data changes in icon data.
• Delta icon call.

Icons - Search and filter icons.

The icons page will be a separate page. We need to make the adoption of the icons easier going forward so the home page will be focused on uses and features.

• Optimize SVG Rendering
• Scrolling loads only the visible icons
• Search by name / alias.
• Filter by tag name.
• Group by tag name.

Allow milestones to be assigned to releases on the history page

The same way issues can be assigned we need to be able to link to milestones.

Restyle "Edit on GitHub" tabs to buttons

Integrate the look of the GitHub button into the design so it it has the same grey gradient.

Some keys don't work in search field

This issue inherited from "old" design site

home/end keys don't work in search field

Navigation Pane

It seems like a lot of pages are being added to the site but are hidden away as the app bar at the top of the design would get too cluttered. How about adding in a standard navigation pane to provide links? On desktop this could be made persistent and on smaller displays the MDI logo could be replaced with the menu icon. This also scales down to mobile where the app bar quick links can be hidden as well as the logo text to leave the menu icon, the logo icon centered, and the GitHub icon.

Requests - How and where to request icons

A page showing how to properly request icons. This could also have a list of accepted icon requests that are awaiting contributions as well as rejected icon requests in the hopes of reducing the number of duplicate issues created.

Chat space for contributors

While not directly related to the site, it would be handy to have a space to chat with other contributors on issues, changes, e.t.c. related to Material Design Icons. 🐈

Related Icons

Basically one should be able to add related icons. On the icon page there will be a nice list at the bottom of every page listing "related icons".

This is sort of like tagging, but not as "grouped".

Auto-focus the search field when opening the icons page

This is a minor thing, but it would be great if the input field would be focused when navigating to http://dev.materialdesignicons.com/icons

Saving one click, twice a day. 😅

Pagination/Archive for materialdesignicons.com/history

Hi,
i hope this is the right place for this feature request:
I really like to check the page materialdesignicons.com/history often to find new icons. But the page is getting bigger and bigger and takes lots of time to load (and sometimes crashes my tab in the browser).
pagination would be a good solution. As an easier alternative there could be one archive page with all the icons and the history page with only the last maybe 6 or 12 months (or the last 100 changes, if that is easier).
Regards,
Rex

SVG Optimized Package Download

An option is needed to download various SVG optimized packages for various use cases.

SVG Editor

Might be a feature to look into down the line. A specific SVG editor for these icons based on a 24x24 grid system that allows simple icons to be created and submitted without needing additional software.

Some tags don't search

Some tags can not be searched, a good example would be the Brand \ Logo tag, If you click on this tag from an icon (say twitter) it will just clear the search and go back to being everything. This happens with any tag that has a slash in it, should probably use % encoding or find away to completely remove the slash

Improve Android - Getting Started

https://dev.materialdesignicons.com/getting-started/android

• Introduction to vector drawables
• Explain API version requirements
• We need to explain real world examples

Operation "Stop using the webfont"

Team... we know the reasons why. But we have to think of ways to stop people from using the webfont.

Alias Form

User

• Allow anyone to select an icon from the list and suggest an alias.

Admin

• Quickly Accept/Reject

Criteria

• Optionally enter a GitHub username when submitting an alias
• Aliases cannot exceed 100 characters
• Aliases must be lowercase with hyphens only
• Allow for both MDI and MDI-Light

Sidebar obscuring menu on history page

Probably just a z-indexing issue.

Figma Wireframing (Reply to be added)

Is there any shared document for your wireframe or idea of how you want the site to look? If not, have you heard of Figma? It works great with collaboration.

Icon Export API

A single endpoint to download any output of the icons in.

[{
    "id": "",
    "name": null,
    "type": "png",
    "path": [],
    "width": 24,
    "height": 24,
    "padding": 10,
    "paddingTop": 10,
    "paddingRight": 10,
    "paddingBottom": 10,
    "paddingLeft": 10,
    "foreground": "#FFFFFF",
    "foregroundOpacity": 1,
    "background": "#000000",
    "backgroundOpacity": 1,
    "radius": 10,
    "borderWidth": 1,
    "borderColor": "#990000",
    "borderOpacity": 1,
    "borderCap": "round",
    "borderArray": [4, 4],
    "margin": 10,
    "marginTop": 10,
    "marginRight": 10,
    "marginBottom": 10,
    "marginLeft": 10,
    "gridColor": "#F0F0F0",
    "gridOpacity": 1,
    "matteColor": "#FFFFFF",
    "matteOpacity": 1,
}]

₁ All undefined/null properties default. Numbers 0, Colors transparent
₂ path = array of folder strings. [] (default)
₃ borderCap = butt / square / round (default)
₄ borderArray standard border array. [1] (default aka a solid line)
₅ grid requires at least 72x72. 24x24 grid size.

If more than one item the icon is assumed to be a zip file.

• id (required)
• name = icon name
• path = []
• width = 24
• height = 24
• padding = 0
• paddingTop = 0
• paddingRight = 0
• paddingBottom = 0
• paddingLeft = 0
• foreground = #000000
• foregroundOpacity = 1
• background = transparent
• backgroundOpacity = 1
• radius = 0
• borderWidth = 0
• borderColor = #000000
• borderCap = round
• borderArray = [1]
• margin = 0
• marginTop = 0
• marginRight = 0
• marginBottom = 0
• marginLeft = 0
• gridColor = #F0F0F0
• gridOpacity = 1
• matteColor = #FFFFFF
• matteOpacity = 1

Home - Information Page

We need to display information about the project with emphasis on it's wide adoption and continued development.

• Highlight icon count.
• Started 2+ years ago.
• Make it easy to view the contributor list and icon counts.
• Highlight contributor team and their roles in the project. A lot of you guys are more active on community and future guide authoring rather than simply designing icons.

Open Sourcing MDI Light

This project will work as a personal endeavor not linked to MDI. It will become open source, but not be managed by the community.

View All	Single Icon
icons/	icon/account
icons/light	icon/account/light

https://creativemarket.com/templarian/348441-Material-Design-Icons-Light

All icons are stored in the system already so this addition should not change the scope that much.

Add Keywords to Icons

(Spinning this off from #1903 for discussion here.)

One thing which might be useful to add is keywords; terms people might use to search for an icon but which wouldn't qualify as aliases.

For example, cigarette would work as an alias of smoking but not necessarily for smoking-off. If it were added as a keyword, though, it would allow smoking-off to be returned when someone searched for cigarette.

Multiple Authors for each Icon

As we start to revise icons we need the ability to support multiple authors.

I do not want to support contributors... this should be author: [{id:"", name: "", ...}] style.

• Templarian/MaterialDesign#783

Focus Input on Assign Issue Dialog

When admin's assign an issue on the history page focus the input box.

• Focus Input
• Enter key submits

WCAG Guide

This is the tracker for a new WCAG 2.0 guideline page.

Trailing whitespace breaks documentation

Putting a trailing whitespace at the end of a documentation file produces unexpected result.
trim_trailing_whitespace rule of .editorconfig should ensure that no such thing gets in our md files, but not all users uses compatible IDEs.

Related: #50 (comment)

Ability to select a custom number of icons that goes into mdi.svg

[x] feature request

Right now, mdi.svg contain all the icons.

This is great when it comes to angular material 2. One time registration ensures that there is only one trip to the backend.

However, it would be great if there is an ability of choosing a subset of icons and combine them into a single custom mdi.svg during build time of angular.

Another usage would be to add country flags to mdi.svg as well.

Also, if we could add the steps that generates mdi.svg to the documents.

Fix {{version}} replacement in documentation.

Somehow when switching out markdown parsing this feature broke. It should always use the latest release version number in the DB for the docs to link to various packages.

The latest version is `{{version}}`

Should render as...

The latest version is `2.8.94`.

Move Servers

It's probably pretty obvious by now MDI's traffic and usage has been increasing a lot.

I'm pretty much at the max this current server can handle and while the new site is much more optimized it will not scale as nicely on the current box. I'll be spinning up another server shortly for the dev server.

Without the CDN and some seriously hacky cache system the current box would have imploded long ago.

Search Log

Adding a search log to the site could help with future aliasing and keywording (if added) as it would allow you to see the (most common) terms people were searching for.

Check for existence of #carbon element

The following line in bundle.js is preventing other JS in the admin from executing as the #carbon element doesn't exist in the admin:

document.getElementById("carbon").appendChild(n)

Adding some sort of conditional to check for the existence of #carbon should rectify it.

License - FAQ Page

While running this project I've only gotten asked like 3 times about the license, but the project is large enough we need to outline this to make it more clear for large projects adopting the icons.

• 2 columns. Community Icons / Stock Icons
• Make list of questions.

Generate GitHub Icon Previews from Path Data

We're going to allow GitHub users to create previews very similar to the current previews we have for production icons. This endpoint will simply take SVG path data.

We need a standard approach to approving designs. I'll water mark these with "DRAFT" so people know the difference.

Convert NodeJS blog post to a Guide.

http://templarian.com/2018/04/13/scripting-with-nodejs-and-material-design-icons/

This needs to be on the site as a guide.

Icon Discovery Improvements - Grouping Etc

I feel it may be worth reconsidering the idea of grouped icons for groups which make sense. Things such as file-variant, weather-variant, food-variant, sport-variant, etc. This will group similar icons together in the icon list and generally make searching much easier. We can then also create an issue for each of these groups and use that one issue to handle requests for icons to be added to those groups rather than having requests spread out over a ton of separate issues.

CoC - Code of conduct and email form.

• Copy the same CoC used currently with a similar form.
• Render CoC form.

Document Webfont Builder

Document the end-to-end process of building the webfont with grunt-webfont.

https://github.com/sapegin/grunt-webfont

Donation System

I'm not sure if this something that will ever be added, but we can use this issue to discuss how this would work.

OpenSearch (e.g. Browser Omnibar search) support

To make searching icons even easier, please add an OpenSearch manifest that links to a page with search results.

That way, we could search for icons by typing dev.materialdesignicons.com <tab> arrow right in the browser search bar to get the name of that one icon we always forget the name of. 🏁

I'd be happy to help implement this, but I don't know how we should handle URLs that contain search terms. Maybe by adding #search-term-here to the URL so that the hash can be used client-side? 🤔

Track returned results in search log

Adding the number of results returned for each search term to the search logs would allow us to filter the terms for which no results were returned and focus on creating icons or adding aliases for them.

Polymer View/Download Options

As a user I would like to view polymer styled icons for legacy and the current version similar to the other vector formats.

• Create an option that allows the user to view a code snippet that wraps the path for the icon in a g tag, and provides the appropriate ID.
• Allow the user to select multiple icons (and optionally all icons) and generate an iconset suitable for a Polymer project.

Discuss Tags

Discuss which tags should be added and removed.

We'll be removing the action tag. Think of tags as more of categories.

Setup Continuous Integration

Need to wire up a CI task to build and deploy the site out so we can see the progress real time.

Search Improvments

Currently when searching on the icons page keywords must be separated by hyphens (e.g., account-alert) but it would probably be more intuitive to also allow them be separated by spaces (e.g., account alert).

It would also help if keywords could be entered in any order (e.g., alert account) and also to allow any combination of keywords that appear in either the icon name or its aliases.

Icon picker in Android app

I'm looking to implement a materialdesign.com icon picker in my Android apps so I'm looking for the best way to do it without being to hard on your servers.

I saw that the chrome extension uses a special font to let you pick the icon, so maybe that's a good alternative.

Would that be the way to go? Use the font in the android app to render the icons from there? Or do you see a better alternative?

Thanks in advance for any help!

ADA Testing

ADA testing for high level use of the site. Not sure how far we want to take this, but definitely far enough that people can navigate around.

• Home
• Icons
• Guides
• CoC

Suggested Change to "Angular - Getting Started"

Please bring back your old getting started article for angular 2+ from the old documentation until you have a final new documentation. The current angular 2+ documentation is not helpful at all.