Android icons with looooong material shadows!

Overview

Android Material Shadow Generator

Android icons with that loooong material shadow for everyone!

Android icon example Bug icon example Heart icon example Idea icon example

Screenshot

FAQ

Invalid custom SVG file

Here are some common causes which cause problems.

Paths are not closed

Make sure that your SVG file contains closed paths instead of open ones. For example

Open vs close paths example

The icon on the left contains a single path (made up of two sub paths) that is open at the ends (first node does not connect to the last node). The icon on the right has closed paths, where the shape of the paths are that of the stroke width of the original icon.

For Inkscape users there is a nice tool that does the above conversion: "Path" -> "Stroke to Path".

Paths do not have a fill color

Only paths which have a fill color are imported. Any other paths are considered "invisble".

Build

First, download / setup the dependencies:

npm install

Next get a hold of brunch, the build tool used for this project. To install globally:

npm install -g brunch

Then to start compiling + watching files run

npm start

which will start a local server at http://localhost:3333.

Updating the Google Material Icons

To update the local Google Material Icons collection run ./bin/update-material-icons.sh which will place all icons under app/assets/img/material-icons and create a file with all icon names under app/templates/input-material-icons-data.static.jade.

Tests

Tests require PhantomJS (v2.1.1), CasperJS (v1.1.0-beta5) and the site running at http://localhost:3333 (e.g. npm start). Run tests via npm test.

Travis Status

Nice to know

To directly open an specific icon in the editor, pass the url to the icon as a icon query parameter to the website, for example

http://localhost:3333/?icon=/img/material-icons/action/ic_android_48px.svg

License

Please see LICENSE for licensing details.

Support or contact

For commercial use, please submit a request or send us an email to [email protected].

Comments
  • Add option to apply 'Score' effect

    Add option to apply 'Score' effect

    Quote from guide:

    Scored material elements have the illusion of depth without losing their geometric form. Scores should be centered on symmetrical shapes.

    Examples:

    feature request 
    opened by ok3141 5
  • Error loading SVG file

    Error loading SVG file

    Hello.

    I'm trying to load my SVG file, but I got js error in the Developer Console.

    index.js:9 Uncaught TypeError: Cannot read property '_intersection' of null (Google Chrome 52.0.2743.116 m (64-bit))

    In Microsoft Edge: The following popup appears:

    Invalid SVG file Please use a real SVG file instead.

    My SVG file It is a minified, simplified version of the svg made in Inkscape. (None of the option worked by default during export from Inkscape) Simplified by: https://jakearchibald.github.io/svgomg/

    I tried the example svg-s from this repo, and tried to edit the path, but it gives the same error. There is a problem with the svg or with the generator?

    bug 
    opened by T-bond 5
  • File does not have a extension

    File does not have a extension

    I do not know what the file's extension is - which means I cannot open it. I have tried .png, .ico, .svg, and even .jpg for crying out loud.

    Which means I can't even use it.

    opened by ericswpark 5
  • Error while importing custom SVG

    Error while importing custom SVG

    I encountered an error while importing a SVG file from my hard drive. Here some technical details :

    Imported svg data: Group @1
    Uncaught Error: TypeError: Cannot read property '_visited' of null
        at o (vendor.js:7)
        at XMLHttpRequest.a (vendor.js:7)
        at XMLHttpRequest.e.onload (vendor.js:7)
    
    • Error in console (Firefox)
    Type Error: a is null
    
    • On the site infinite loading
    bug 
    opened by tuarrep 4
  • Licensing Contradiction

    Licensing Contradiction

    The non-commercial exception to the AGPL is effectively without effect as the program can be acquired under the terms of the AGPL which permits to remove such "further restrictions". (see Section 7 and 10)

    This is specifically stated in the official FSF FAQ: https://www.gnu.org/licenses/gpl-faq.html#GPLCommercially

    opened by frhun 3
  • Removing box shadow and having a larger icon

    Removing box shadow and having a larger icon

    Is there currently a way to remove the box shadow from the icon itself (not the svg that you uploaded). The icon exported with the shadow looks smaller in comparison to other icons Android app icons, so wanted to export it without the shadow so that the icon can be slightly larger is size.

    opened by asaadmahmood 1
  • Hi, this is awesome but seems to show problems in chrome 55

    Hi, this is awesome but seems to show problems in chrome 55

    Uncaught TypeError: t.setRampPoint is not a function at offset (index.js:10) at Object. (index.js:10) at Object.o (index.js:5) at Function.i [as each] (index.js:5) at v (index.js:10) at o (index.js:10) at k (index.js:10) at index.js:10 at e (index.js:10) at k (index.js:10)

    It seems to be the new version of chrome dose not work with the paperjs

    bug 
    opened by loooog 1
  • Page not wrking

    Page not wrking

    Hi, today i wanted to enter the website at https://android-material-icon-generator.bitdroid.de/ and google said this site cant be reached. It will be really help full if you can fix it

    opened by negrifelipe 1
  • Gradient in input SVG causes error

    Gradient in input SVG causes error

    Hi,

    I'm trying to upload an SVG file to the website, then it just keeps loading forever.

    It does load side menu with tools and even download option, but the main side just displays a loading indicator forever.

    I've attached the SVG I'm trying to upload in case you guys want to test

    I'm using Chrome Version 61.0.3163.100 (Official Build) (64-bit) on Windows 10

    LOGO PUSH NOTIFICATION.zip

    bug 
    opened by chimura 1
  • Add box shadow [feature request]

    Add box shadow [feature request]

    On the example images (https://android-material-icon-generator.bitdroid.de/img/hero/icon-3.min.svg), there's a shadow, but if I use the generator there isn't one.

    opened by Allen-B1 2
Owner
Philipp Eichhorn
Founder of Wolvesville
Philipp Eichhorn
A tool to install components of the Android SDK into a Maven repository or repository manager to use with the Android Maven Plugin, Gradle and other tools.

Maven Android SDK Deployer Original author including numerous fixes and changes: Manfred Moser [email protected] at simpligility technologies i

simpligility 1.4k Dec 27, 2022
A simple utility to remove unused resources in your Android app to lower the size of the APK. It's based on the Android lint tool output.

android-resource-remover android-resource-remover is utility that removes unused resources reported by Android Lint from your project. The goal is to

Keepsafe 1.3k Dec 16, 2022
This is a Android Studio/ IntelliJ IDEA plugin to localize your Android app, translate your string resources automactically.

#Android Localizationer This is a Android Studio/ IntelliJ IDEA plugin to localize your Android app, translate your string resources automactically. T

Wesley Lin 822 Dec 8, 2022
A tool to install components of the Android SDK into a Maven repository or repository manager to use with the Android Maven Plugin, Gradle and other tools.

Maven Android SDK Deployer Original author including numerous fixes and changes: Manfred Moser [email protected] at simpligility technologies i

simpligility 1.4k Dec 27, 2022
Automated-build-android-app-with-github-action - CI/CD Automated Build Android App Bundle / APK / Signed With Github Action

Automated Build Android With Using Github Action Project Github Action Script Us

Faisal Amir 34 Dec 19, 2022
proguard resource for Android by wechat team

AndResGuard Read this in other languages: English, 简体中文. AndResGuard is a tooling for reducing your apk size, it works like the ProGuard for Java sour

shwenzhang 8.1k Jan 9, 2023
A super fast build tool for Android, an alternative to Instant Run

Freeline Freeline is a super fast build tool for Android and an alternative to Instant Run. Caching reusable class files and resource indices, it enab

Alibaba 5.5k Jan 2, 2023
Command-line tool to count per-package methods in Android .dex files

dex-method-counts Simple tool to output per-package method counts in an Android DEX executable grouped by package, to aid in getting under the 65,536

Mihai Parparita 2.6k Nov 25, 2022
View Inspection Toolbar for Android Development

View Inspector Plugin View inspection toolbar for android development. Features Boundary show outlines show margins show paddings Layer Scalpel featur

Fumihiro Xue (Peter Hsieh) 2.2k Nov 14, 2022
Make Android screenshots of scrollable screen content

scrollscreenshot Make Android screenshots of scrollable screen content - brought to you by PGS Software SA This tool makes a number of screenshots, sc

PGS Software 714 Dec 7, 2022
🍼Debug Bottle is an Android runtime debug / develop tools written using kotlin language.

???? 中文 / ???? 日本語 / ???? English ?? Debug Bottle An Android debug / develop tools written using Kotlin language. All the features in Debug bottle are

Yuriel Arlencloyn 846 Nov 14, 2022
[] Dissect layout traversals on Android

Probe Dissect layout traversals on Android. Features Intercept View methods. onMeasure(int, int) onLayout(boolean, int, int, int, int) draw(Canvas) an

Lucas Rocha 555 Nov 25, 2022
Android Library Finder

alfi Android Library Finder Search through thousands of android libraries that can help you scale your projects elegantly Usage Search for something a

César Ferreira 509 Dec 8, 2022
Annotation based simple API flavored with AOP to handle new Android runtime permission model

Let Annotation based simple API flavoured with AOP to handle new Android runtime permission model. If you check Google's Samples about the new permiss

Can Elmas 530 Nov 25, 2022
Combines tools for fast android app devlopment

Android - Rapid Test Driven Development Combine tools to generate most of the boilerplate code. Examples how to test different aspects of an android a

Nico Küchler 379 Nov 25, 2022
Make mosaic effect on android

ProMosaic Make mosaic for image on android. Features Select Mode Follow finger Select rectangle Effect Mode Grid color based on original image Blur Im

dawson 359 Dec 29, 2022
A set of Android tools that facilitate apps development

A set of Android tools that facilitate apps development Well, this repo contains pretty much code used internally at Stanfy to develop Android apps. S

Stanfy 183 Dec 3, 2022