pictogrammers / pictogrammers.com

Code for Pictogrammers.com

Pictogrammers.com

Built with Next.js.

Development

Requirements

• Node.js v18+
• Docker

Instructions

1. Clone this repository.
2. Generate your development certificates.
   • On Mac, run npm run certs:mac. You need Homebrew to be installed.
   • On Windows, run npm run certs:win. You need Chocolatey to be installed.
   • On any other platform, see Generating Dev Certs.
   • Once your certs are generated, you do not need to run this command again unless you delete the certs or they expire.
3. Run npm i.
4. Run npm run dev to start the dev servers.
   • Access the dev site at https://dev.pictogrammers.com.
   • Access the dev API at https://dev-api.pictogrammers.com.
   • The dev MySQL instance will come up at http://localhost:3306.

The site and API will hot-reload as you make changes.

See https://pictogrammers.com/docs/contribute/website/ for more details about contributing to the site.

Generating Dev Certs

If you are not using Mac or Windows, you will need to follow the instructions on the mkcert GitHub page to install the version for your platform.

You need to generate certs for the following two domains:

• dev.pictogrammers.com
• dev-api.pictogrammers.com

Place these certifications in the .dev/certs directory. Then start the application.

Env variables

GitHub API Access Token (REQUIRED)

As part of the site's build process, information is pulled from GitHub about our contributors. This data is required for the site to build.

1. Create a classic GitHub personal access token.

• Required permissions: public_repo, read:org, read:user, user:email

2. Create a .env file in the root of the repository.
3. Add API_KEY_GITHUB to the .env file with your token.
4. Restart the dev server.

GitHub OAuth Client & Secret (Optional)

To test and debug any part of the site behind authentication, you will need to create a GitHub OAuth application and provide the Client ID and Secret in the environment file.

This is not required to work on public facing areas of the site. You will be unable to log in/out or access areas of the site behind authentication.

1. Create a GitHub OAuth App.
2. Use https://dev-api.pictogrammers.com/auth/github/callback as the "Authorization callback URL".
3. Create a .env file in the root of the repository.
4. Copy and paste your client ID and secret into the env file.

   GITHUB_CLIENT_ID={YOUR_CLIENT_ID}
   GITHUB_CLIENT_SECRET={YOUR_CLIENT_SECRET}
   

5. Restart the dev server.

Code Quality

Before opening a PR with your changes, be sure to run npm run lint and correct any linting errors. These jobs will also run on the PR, informing you of failures that will need to be addressed before your PR can be merged.

Building

You shouldn't need to build locally. This information is provided for advanced troubleshooting cases.

1. Run npm build to build the site and API.
2. The built assets will be located in the following folders:

• Client: /client/dist
• API: /api/dist

Legal

© Copyright 2023 Pictogrammers.

pictogrammers.com's Issues

Advanced PNG Export - wrong icon dimension

Hi the export of the icon is wrong, look at this sample png:

The icon would be 256x256 png image but the result is a 12x12 pixels icon on a 256x256 layer.

Kind Regards

Rails getting started page uses inexisting gem

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Following https://pictogrammers.com/docs/library/mdi/getting-started/ruby-on-rails/
material_design_icons ruby gem does not exist on rubygems.org.

gem install material_design_icons fails with:

ERROR: Could not find a valid gem 'material_design_icons' (>= 0) in any repository

Describe the behavior you expected

It should install the gem

Steps to reproduce the issue

1. Run gem install material_design_icons
2. Observe failure

Which browser are you experiencing the issue?

No response

Which operating system are you using to run this browser?

No response

Additional information

This instruction allows for anyone to start doing squatting to make user install anything when following official documentation

Where is the API now?

https://github.com/Pictogrammers/pictogrammers.com/blob/39490f3c44e614888dab9b881549c42e4d5d740f/docs/contribute/api.mdx#base-url mentions that the API may move as the base URL transitions. Currently, the API redirects to pictogrammers.com which returns 404.

Migrating from materialdesignicons.com api to pictogrammers.com

Hi,

I hope this is the correct repo to put this under,

I wrote and maintain a little library (https://github.com/SmileyJoe/lib_android_icons) to help with loading icons in Android. It gets a list of all icons from https://cdn.jsdelivr.net/npm/@mdi/svg@{version}/meta.json and then uses the materialdesignicons.com/api/icon/{id} endpoint to load the svg data.

The cdn url is still returning the list of icons, however, the api/icon/{id} endpoint is returning a 302 with a redirect to pictogrammers.com/library/mdi/?welcome

With the move to pictogrammers is there an updated url to retrieve the icon data?

Thanks

Page crashes when type "!" in search

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Page crashes when type "!" in search

Describe the behavior you expected

Search and the icon which looks like "!"

Steps to reproduce the issue

1. Go to https://pictogrammers.com/library/mdi/
2. Type "!" in search field

Which browser are you experiencing the issue?

Google Chrome 116.0.5845.96

Which operating system are you using to run this browser?

Windows 10

Additional information

No response

Carbon Ads

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

We have one recommendation to help improving the performance of the ads for us to continue serving ads on https://pictogrammers.com/
I like the idea of refreshing the ad whenever the users clicks on an icon and displays the modal view. However, the users won't see the ad if they scroll down to the page. Can we not refreshing the ad on the top, but instead reloading a new ad unit inside the icon modal view?
Something like this — you can call the reload function to insert the ad in a different place.

Describe the behavior you expected

See Email

Steps to reproduce the issue

Which browser are you experiencing the issue?

No response

Which operating system are you using to run this browser?

No response

Additional information

No response

Xaml (canvas) available without download

Describe your suggested feature

I always use the xaml (canvas) icons. Was really good when I could just copy and paste it in the previous UI. Now I have to download it, which is much more time consuming. Is it possible to put it back so can be viewed within the web page and copied without having to open it and then copy it?

Show related icons in the Icon View

As a user of the Pictogrammers website, when I'm searching for an icon to use, I'd like to see suggestions of icons that are related or similar, so that I may have an easier time finding an appropriate icon to use.

Notes:

• Changes have been made to the build process scripts to include the baseIconId and the deprecated flag in built meta.json files with the appropriate SVG package released to NPM. However, we have not released a version of any library since the changes happened, so this data is not yet available for use. Until we release a package, we cannot implement this change.

AC:

• Use the baseIconId to show a section containing related icons on the full Icon View (hide in the modal).
• Use the deprecated flag to show information about an icon's impending demise.
  • We may also want to highlight this on the full icon library view and/or the full-site search results.

URL for all icons in a certain release

Describe your suggested feature

Currently, there is a filter "New Icons in v6.5.95", namely:
https://pictogrammers.com/library/mdi/version/6.5.95/

Is there also a URL for icons available in that release? (This could also a filter on the left, but doesn't even need to. You could add the link to the yellow notice showing on https://pictogrammers.com/library/mdi/version/6.5.95/ : "All icons available in this release")

Use Case: I am using https://www.npmjs.com/package/react-native-vector-icons which includes a certain version of the icons, so I want to give my client a link that showcases all icons available.

Scroll to learn more

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

The "Scroll to learn more" action button got hidden because of the screen size of my notebook.
Probably a responsive bug.

Describe the behavior you expected

I expected to see the button clear and not hidden behind others elements.

Steps to reproduce the issue

1. Open the website with an screen of 1525px. ( my notebook width size)

...

Which browser are you experiencing the issue?

Firefox

Which operating system are you using to run this browser?

Fedora 36

Additional information

Hope to be helping the website to get better.

Pressing enter in the search box replaces the text with `undefined`

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Pressing enter in the search box replaces the text with undefined and does not search anything

Describe the behavior you expected

Pressing enter navigates you to a full search result page

Steps to reproduce the issue

1. Press enter in the search box
2. It is now undefined

Which browser are you experiencing the issue?

Firefox nightly 111.0a1 (2023-01-31) & Chrome 109.0.5414.74

Which operating system are you using to run this browser?

Arch Linux

Additional information

No response

Replace broken link

From homepage, https://pictogrammers.netlify.app/icons/mdi should be https://pictogrammers.netlify.app/library/mdi!

Contributing: UI Improvements

Hello!

• 1. I would like to help improve the site, but not in terms of functions, but in terms of interface and scss. I started by reducing the use of background-images on the site by replacing them with css pattern, but I can't test this as the command npm run dev throws an error:

info - Retrieving contributors from the API...
ReferenceError: fetch is not defined

Look at my changes: andrejsharapov@a43fea1

• 2. I would advise you to use one of the commit message conventions like this.

• 3. One more question. Do you have a site prototype in Figma that I can to duplicate and think about improving the site? This would be a good practice not only for me, but also for other users.

The page content can't display normally

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When the page loads for a while, the page content will suddenly change from existing to empty.
At the same time, console logged an error:

TypeError: e is undefined
    NextJS 31
        eo
        ei
        ei
        oB
        oX
        e
        uB
        uB
        ux
        x
        R
        73323
        b
        91102
        b
        43577
        b
        31542
        b
        37634
        b
        26372
        b
        28579
        b
        t
        <anonymous>
        O
        <anonymous>
        d
        <anonymous>
[framework-673dd0e636e3c62a.js:25:69812](https://pictogrammers.com/_next/static/chunks/framework-673dd0e636e3c62a.js)
    NextJS 34
        l9
        callback
        aW
        oX
        e
        uB
        uB
        uT
        r6
        uB
        uB
        ux
        x
        R
        (异步：EventHandlerNonNull)
    73323
        b
        91102
        b
        43577
        b
        31542
        b
        37634
        b
        26372
        b
        28579
        b
        t
        <anonymous>
        O
        <anonymous>
        d
        <anonymous>
Uncaught TypeError: e is undefined
    NextJS 31
        eo
        ei
        ei
        oB
        oX
        e
        uB
        uB
        ux
        x
        R
        73323
        b
        91102
        b
        43577
        b
        31542
        b
        37634
        b
        26372
        b
        28579
        b
        t
        <anonymous>
        O
        <anonymous>
        d
        <anonymous>
[main-c4b60f84fca7a87d.js:1:17741](https://pictogrammers.com/_next/static/chunks/main-c4b60f84fca7a87d.js)
    NextJS 2
        eo
        ei
    forEach self-hosted:206
    NextJS 7
        ei
        oB
        oX
        e
        uB
        uB
        ux
    ux self-hosted:1220
    NextJS 21
        x
        R
        (异步：EventHandlerNonNull)
    73323
        b
        91102
        b
        43577
        b
        31542
        b
        37634
        b
        26372
        b
        28579
        b
        t
        <anonymous>
        O
        <anonymous>
        d
    d self-hosted:1220
    <anonymous> NextJS

Describe the behavior you expected

When the page loads for a while, the page content can displayed normally.

Steps to reproduce the issue

1. Go to any page, such as: https://pictogrammers.com/docs/general/license/
2. Wait for the page to load for a while.

Which browser are you experiencing the issue?

Mozilla Firefox 88.0

Which operating system are you using to run this browser?

Windows 10 (21H2)

Additional information

1. I used machine translation and there may be inappropriate descriptions. Sorry.
2. Microsoft Edge 116.0 & Google Chrome 117.0 can't reproduce this problem, the page content is displayed normally.
3. A few months ago, this problem had not yet arisen.
4. Screen recording:

ScreenRecording.mp4

Search with Cyrillic letters brokes site.

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When try to search with Cyrillic website brokes and show black screen with error message. To fix need to reload page.
Additional Information: Users outside English speaking countries often use few input languages on their devices, and accidentally forgetting to switch it before typing in.

Describe the behavior you expected

a) Show default error - Not Found
b) Make search with transliteration.

Steps to reproduce the issue

1. Open pictogrammers.com
2. Click on Search
3. Type any Cyrillic letters. As example є і т й ч

Which browser are you experiencing the issue?

Firefox 117.0b7 (64-bit), Edge 117.0b7 (64-bit)

Which operating system are you using to run this browser?

Windows 11 (22H2)

Additional information

No response

https://pictogrammers.com/library/mdi/ loads icons weirdly

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When scrolling https://pictogrammers.com/library/mdi/ icons do not load before they are on screen and jump around when loads happen. This only happens in Firefox

Describe the behavior you expected

Icons attempt to load before they are on screen, and do not shuffle around as new icons are loaded

Steps to reproduce the issue

1. Navigate to https://pictogrammers.com/library/mdi/ in Firefox
2. Scroll down
3. Observe multiple empty rows
4. Observe icons moving which column they are in when the empty rows are filled

Which browser are you experiencing the issue?

Firefox 109.0.1 / Firefox Nightly 111.0a1 (2023-01-31)

Which operating system are you using to run this browser?

Arch Linux / Windows 10

Additional information

2023-02-05__10_56_25.mp4

When will you be changing old twitter icon to X?

Describe your suggested feature

Good day.

When will you be changing the old Twitter icon to X?

Regards
Louis

Why are so many icons being deprecated?

Describe your suggested feature

There's so many icons which are being deprecated? Why is this happening?

Improve general Getting Started experience

As a new user of the Pictogrammers website, I'd like to be pointed to ways to Get Started with a library quickly, so that I am not held up looking for resources for my project.

AC:

• Write a new General document simply called "Getting Started." This document will discuss how to interact with our libraries and get assets into a user's project in the shortest amount steps possible.
  • This new documentation should also include links to other, more specialized documentation we already have (or may need to write).
• Update the home page Hero to include a Get Started Now button that links to this document.

Can't tell which icons are from Material or from the Community

Your new website for material design icons looks nice.

However, one of the things I relied on or found quite useful on the old site was the red border highlight/outline around icons that indicated the icon was a community icon. I was nice to to be able to see what the core Material icon was when searching, but then being able to see the community additions and variants related to a particular search of keyword(s).

I request that you add a similar indication on the new site.

Full Icon View pages should contain a usage example section

As a user of the Pictogrammers website, I'd like to see examples of how I might implement an icon I am considering using. This would show the icon in various situations... in a button, in a dashboard, on a poster, in a toolbar.

AC:

• Add a new section to the Icon View while in full-screen mode (hide in modal view) that contains usage examples.
• Be certain all examples handle responsive viewports.

Custom size icon export

Hi,

I am missing ability to export icon in custom size (like png 16x16px , or 128x128px, etc...).

Can you "restore" this feature: export icon in user-specified size and let user chosen format (PNG is mandatory 😄 , SVG, bmp?, gif?, svg?, etc...)?
I've been using this feature a lot. (Since I'm not good with "graphic programs" and they often make icon "ugly" when I shrink it 😞).

quargh mentioned this under already closed issue: #19 (comment)

Ps. Other formats than PNG and SVG, personally I do not need, and I don't remember what other formats was available on materialdesigicons page 😅

Profile

Describe your suggested feature

``fullprofile

Drawable images android??

When the website was "https://materialdesignicons.com/" I was able to download the icons in drawable folders, but it seems the new site doesn't have that?

I'm using Xamarin/visual studio so if there is an alternative NuGet for visual studio i guess i wouldn't mind (even though the number of pictures will be a waste of space).

The site did use to include black/white/gray by default. (I never understood why downloading custom colors weren't easy...)

Looking at old code i made it seems i mostly use 36.png and 24.xml (Mostly saying this since new site doesn't seem to have a size picker)

Advanced Icon Export

As a user of Pictogrammers.com, I would like to export icon glyphs in sizes and colors that fit my use case, so that I do not have to rely on external tools to modify an icon glyph I'd like to use.

AC:

• A new Advanced Export feature is added to the current Icon View.
• The Advanced Export tool will only export raster-based PNG images. (Why?)
• A user can change the foreground and background color (rgba) to their preference.
• A user can change the exported size of the icon.
• The current download options for PNG of 24, 36, and 48, will be condensed into a simple "Export as PNG" which will give a user a 256x256 version in black. Anything else will be considered an advanced export use case.

Why only PNGs?

We provide icons for graphic design and development.

For design, PNGs are generally higher-quality than other formats (such as JPG) and support transparency. Additionally, they are supported pretty much anywhere they would need to be used. If other formats (such as JPG, WebP, etc.) are required, converting them will be the responsibility of the user.

For development, SVGs should be the primary format. They are vector-based and can be resized and colored easily and dynamically.

Improve and expand the footer

As a user of the Pictogrammers website, when I hit the bottom of a page, I don't want to have to scroll all the way back to the top if I did not find what I was looking for.

AC:

• Add quick links to our libraries.
• Add quick links to documentation categories.
• Add a link to our tools page.
• Retain links to our Privacy Policy, Code of Conduct, and Brand Guidelines.
• Retain links to our social media presence.
• Properly flow all this information on mobile screen sizes.

Android XML vectors don't work

Before You Begin

• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Whenever I download anything as an Android XML Vector, it won't import into Android studio. The image is always black. It used to work when the site was materialdesigns. If you download an vector from Google icons theirs also works. But I get this every time.

Describe the behavior you expected

Expect the icon to display and not black boxes.

Steps to reproduce the issue

...
Download an XML Android vector and try to create an image asset.

Which browser are you experiencing the issue?

No response

Which operating system are you using to run this browser?

No response

Additional information

No response

Advanced Export - numeric inputs & some predefined colors

Hi,
Some more suggestions 😄

1.

I would like to point out that those "sliders" are annoying (like try sliding it to 16px, and do it multiple times 💢 for different icons 😑 ), I would like to suggest adding beside sliders (like it was in old version) - numeric input field where I just can type e.g. size in px (from 8px at least 😉 ), for:

• size,
• padding,
• rotate (?),
• corner radius (?).

2.

Can I ask to restore in color pickers: some predefined colors - like it was in old version? Those were really helpful, I just clicked color and was done, now I have to copy-pase color for every icon I want to download 😑 ...

Ps. Sorry for being annoying, just my workflow got busted by killing old materialdesignicons.com 😩 , I think you should add some big banner that old page will be shut down, with link to new one (and like no updates, etc...), and work on pictogramemrs.com in mean time - so you could just swap it at some point when it'll be considered ready (all functions, features from old + new ones are finished&working).

Right now, this how I feel about this swap: It's like something M$ would do: "just forcefully push new os to users , and let's wait for their feedback (mildly speaking) what we forget to do..." - I am sorry, this how I feel about it right now 😞

Support Dark Themes

As a user of the Pictogrammers website, I would like it to respect my OS's theme setting and display the website in either a dark or light theme. Additionally, I would like to have an option to switch between the two modes.

Notes:

The structure of the CSS already is laid out to add more theme versions.

AC:

• Add a theme-dark and define the color overrides.
• Add logic to automatically choose the correct theme based on user setting.
• Allow the user to toggle between light and dark mode. If this happens, remember their setting in a cookie/local storage and default to it on return visits.

Set icon color to export

Hi,

Now it is impossible in this new page to export icon in different colors (background & foreground) - it was possible to do this along with custom icon sizes #20 .

Please 🙏 , can you restore this functionality? This feature and #20 was most used by me.

Compact Icon View

Describe your suggested feature

In the old page, there was a more compact view without labels so it was more easy to find an icon.
This is no longer possible.
I never look at labels when I search for an icon, I look at the icons...

Cookie for remembering consent expiration too short

The current implementation of the cookie that remembers if a user consented to our analytics tracking is not being set with an expiration, so it's reprompting people every session. This is annoying. The cookie should be retained for 6 months max to stay within GDPR regulations.

[pixel-editor]: add path reset button

Describe your suggested feature

1. I think it's worth adding a button to reset the entire path. It will be more convenient than erasing one cell at a time.

2. For handleMouseMove, there is only the addition of points, but there is no way to erase them.

XML Vector Drawable Filenames

Typically, these drawables are used on the Android platform.

Please replace the "-" (dashes) in the target filename with "_" (underscores).

Dashes in resource filenames are not allowed, so we must manually change the downloaded filename as described before we can use them.

Support Material Symbols

Describe your suggested feature

Google released a successor to Material Icons called Material Symbols.
See: https://fonts.google.com/icons?icon.set=Material+Symbols

On the left side you can switch back to Material Icons:

The new Material Symbols contain icons that are not included in the current Material Design Icons
For example routine:

advanced PNG bulk donwload

Describe your suggested feature

Is it possible to donwload MORE icons in specific format?

For exapample i would like to download icons in name: "light", color: white, size 256x256.

Improve Contributor visibility

As a user of the Pictogrammers website, I'd like more visibility into the contributors bringing me the icons and fonts that I use. As a Contributor to the Pictogrammers' projects, I'd like to see a summary of the things I've done and be able to link to a page showing off my accomplishments.

Notes:

• This will require work to the private, closed-sourced API. The current API endpoints only return metadata for contributors to the Material Design Icons library.
• Additionally, there should be more fields of information we can store about a user. Some ideas are internal titles, internal notes, more social media links (such as Mastodon), etc.
• This work does not include a way for Contributors to update their information. That will come later on when we revamp the Administration site.

AC:

• New pages exists at /contributor/{github_name}. These pages show all information about a given Contributor.
  • The new pages should contain total icon counts across all libraries, as well as icon counts split by library.
  • The new pages should show all icons created by the contributor right on their page, as well as links to the full library with the contributor filter enabled.
• Any place we credit a contributor, such as on the individual icon views, should have their links updated to the new contributor page.
• Contributor pages should be added to the sitemap.xml and be indexed by search engines unless this option is turned off in the contributor's profile.

Aftab Bhai

Describe your suggested feature

![res_mipmap-xx)

Advanced export - empty png [Firefox]

Hello,

Using advanced export generate only empty PNG image.

(87bytes 🤔 )

New emoji

Describe your suggested feature

<!-- drawable/emoticon_outline.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:fillColor="#000000" android:pathData="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/> </vector>

Add new SVG tab beside webfont

Describe your suggested feature

Hi, thanks a million for maintaining this amazing project. Previously, we could see the SVG file codes/contents before downloading. but in the new website, there's no way I can see the SVG file codes/content before copying/downloading. Can you please add a new SVG tab beside webfont tab? or anywhere you prefer, so that we can see the SVG file contents?
here's a screenshot of what I mean:

Thanks a million again. Have a wonderful day.

Play button with rounded corners

Describe your suggested feature

Hi,
If you can, please add the play button with rounded(smooth) corners. Thank you.

Improve search

The current implementation of searching for icons is lackluster. I should know, I coded it. 😅 There are some limitations when performing searches on IndexedDB that are really apparent when searching for word partials.

I will be implementing full fuzzy searching for each icon library, as well as full site search, including all icon libraries and documentation.

This work is being completed in #4.

Support for animated icons

Describe your suggested feature

Sorry if this is the wrong place for this, I tried to look for the most appropriate place and couldn't find a more suited one for this.

Would it be possible to add support for animated icons? Maybe in a way that icons can have two versions, animated and non-animated. This could be very useful for example in home assistant, to have an icon animate when a device is on or doing something. Like have a little drip animation when the coffee maker is on, or a fan spinning when it's turned on. These could also be used as little one-off animations when a button is pressed, like spin the fan blades a bit when a fan os turned on, then return to the non animated state, kinda like many icons in android and Windows 11 do. This would add some really nice attention to detail for ui's using these icons, I think.

I'm not really a programmer myself, but if this kind of feature can be added, I would definitely be contributing some animated versions of the icons myself!

Create better website dev documentation

As a potential contributor to the Pictogrammers website, I would like to know about how to get started, technologies used, file structure, acceptable coding practices, etc., so that if I create a PR, it can be reviewed and merged quickly.

AC:

• Write new/update existing documentation in the Contribute to the Pictogrammers Website doc.
• Link to this document in the README in the root of this repo.

Website is very slow to load

I wanted to pick an icon on https://materialdesignicons.com/ and was redirected to the new website https://pictogrammers.com/library/mdi/?welcome.

But this website is unusable as it's very slow to load. I am now waiting a few minutes (approx. 8 minutes) for it to finish loading. I even got timeouts for multiple requests.

I'm located in Central Europe (Czech Republic) area and I don't know in which AWS region is this site hosted, but it appears that it is not very usable from Europe (other colleagues from different areas have same problems).

Icon generator

Describe your suggested feature

Hi,

Please consider creatingt icon generator combining simple icons with additional signs.

By simple icons I mean icons like "folder", "map", "airplane" and by additional signs "-clock", "-lock-open", "-lock", "-check".
Those two shapes can be combined programmatically giving plenty of additional icons: "filter-lock-open", "bicycle-clock"

It can be done easily by applying to main shape with mask depending on secondary shape and then adding path with secondary shape in that place.

Best regards,
Janusz

Where are the png files?

There is no way to download as png anymore?

Official Web Component Support

Describe your suggested feature

It would be great to have an official MDI Web Component implementation that fetches an icon by name and allows it to be styled. Custom elements are framework agnostic, all one would need to do to use the icons is import the element and set the name property. I'd be happy to polish this up and open a PR if there's any interest.

CodePen Example

Features

• Almost too easy to use with any site/app/platform/framework
• Low overhead
  • Script is small
  • Quickly fetches only the requested icons
  • Serves SVG from unpkg

Example Implementation

<script src=//unpkg.com/@mdi/element type="module"></script>

<mdi-icon icon="account" style="color: blue; width: 2rem;"></mdi-icon>

<mdi-icon icon="dog" style="color: brown; width: 2rem;"></mdi-icon>

<mdi-icon icon="cat" style="color: magenta; width: 2rem;"></mdi-icon>

<mdi-icon icon="car" style="color: red; width: 2rem;"></mdi-icon>

<mdi-icon icon="layers" style="color: green; width: 2rem;"></mdi-icon>

Vip Tips

Describe your suggested feature

ywywhshdhfhfh