Android material design icon generator

Android Material Shadow Generator

Android icons with that loooong material shadow for everyone!

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

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».

First, download / setup the dependencies:

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

Then to start compiling + watching files run

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 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 .

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

Please see LICENSE for licensing details.

Support or contact

For commercial use, please submit a request or send us an email to material-icons@bitdroid.de.

About

Android icons with looooong material shadows!

Источник

This plugin help you to set material design icon to your project.

Overview

Android Material Design Icon Generator Plugin

This plugin help you to set material design icons to your Android project.

Preference > Plugins > Install plugin from disk. Select MaterialDesignIconGeneratorPlugin.zip above.

On Linux or Windows:

File > Settings. > IDE Settings > Plugins > Install plugin from disk. Select MaterialDesignIconGeneratorPlugin.zip above.

Restart IntelliJ/Android Studio to activate plugin.

Install IntelliJ Plugin Repositories

Go Preference > Plugins > Browse repositories , then search material .

On Linux or Windows:

Go File > Settings. > IDE Settings > Plugins > Browse repositories , then search material .

Issues

NullPointerException

I am having null pointer exception while clicking on «Material Design icon» in «New in Current Directory». Here is the details.

java.lang.NullPointerException at java.io.FileInputStream. (FileInputStream.java:138) at com.intellij.openapi.util.JDOMUtil.loadDocument(JDOMUtil.java:340) at com.konifar.material_icon_generator.MaterialDesignIconGenerateDialog.initIconComboBox(MaterialDesignIconGenerateDialog.java:271) at com.konifar.material_icon_generator.MaterialDesignIconGenerateDialog. (MaterialDesignIconGenerateDialog.java:86) at com.konifar.material_icon_generator.MaterialDesignIconGenerateAction.actionPerformed(MaterialDesignIconGenerateAction.java:27) at com.intellij.ui.popup.PopupFactoryImpl$ActionPopupStep$1.run(PopupFactoryImpl.java:733) at com.intellij.ui.popup.AbstractPopup$18.run(AbstractPopup.java:1248) at com.intellij.openapi.wm.impl.FocusManagerImpl.flushRequest(FocusManagerImpl.java:651) at com.intellij.openapi.wm.impl.FocusManagerImpl.flushNow(FocusManagerImpl.java:632) at com.intellij.openapi.wm.impl.FocusManagerImpl.flushIdleRequests(FocusManagerImpl.java:602) at com.intellij.openapi.wm.impl.FocusManagerImpl.access$200(FocusManagerImpl.java:60) at com.intellij.openapi.wm.impl.FocusManagerImpl$IdleRunnable.runEdt(FocusManagerImpl.java:108) at com.intellij.openapi.util.EdtRunnable$1.run(EdtRunnable.java:28) at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:251) at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:733) at java.awt.EventQueue.access$200(EventQueue.java:103) at java.awt.EventQueue$3.run(EventQueue.java:694) at java.awt.EventQueue$3.run(EventQueue.java:692) at java.security.AccessController.doPrivileged(Native Method) at java.security.ProtectionDomain$1.doIntersectionPrivilege(ProtectionDomain.java:76) at java.awt.EventQueue.dispatchEvent(EventQueue.java:703) at com.intellij.ide.IdeEventQueue.defaultDispatchEvent(IdeEventQueue.java:697) at com.intellij.ide.IdeEventQueue._dispatchEvent(IdeEventQueue.java:524) at com.intellij.ide.IdeEventQueue.dispatchEvent(IdeEventQueue.java:335) at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:242) at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:161) at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:150) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:146) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:138) at java.awt.EventDispatchThread.run(EventDispatchThread.java:91)

PatternSyntaxException

I tried just today to run the plugin in Intellij Community edition. Installs nice, but after selecting add new material design icon from context it crashes with the following error: My version of intellij community: 14.0.3

Fixed issues in Windows. Cleaned up workspace folders.

I apologize for the giant change log, I removed the out/ folder from the repository.

This should fix issues #1, #2, #5, #6, #7, #17. As a convenience, I’ve also re-build the new .jar from my source.

NullPointerException

no message, when trying to click it on menu.

New Icons

There are a lot of new icons available on Google’s material icon website. Possibly update?

Resource dir can not be found

I’m trying to generate icons. But i’m getting the error : «Resource dir can not be found» help !!

Update to Material Design Icons 2.0

I miss e.g. https://www.google.com/design/icons/#ic_power_settings_new

The changelog for 2.0 said: More than 80 new icons

not working:PatternSyntaxException

android studio 1.2 beta windows 7 plugin not working and the error is: PatternSyntaxException Unexpected internal error near index 1
^

Color issue with generating in 24dp and 48dp

Some icons with dimen 24dp and 48dp have an issue. The image is total filled with color in resolutions bigger than hdpi .

I didn’t try with all icons. But the icon wich I need have the problem: ic_add with white color, but the same problem occurs with any color. See images attached.

As explained in guidelines (link below) , Drawer icon should be: 54% #000000 Maybe I am wrong, but is seems that the current plugin doesn’t allow such icons. Should we work with alpha in xml (which might not be a good idea regarding performances?)

Is this plugin still supported?

Is this plugin still supported? I ask this, becuase there are some issues with AndroidStudio 3.6+ and this plugin and there are no answers from the developer.

Exception in plugin Android Material Design Icon Generator(1.9). Plugin Andorid Studio 3.6

getAllResourceDirectories() is deprecated

java.lang.NoSuchMethodError: org.jetbrains.android.facet.AndroidFacet.getAllResourceDirectories()Ljava/util/List;

This is the environment:

Android Studio 3.6 Build #AI-192.7142.36.36.6200805, built on February 12, 2020 Runtime version: 1.8.0_212-release-1586-b04 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o Windows 10 10.0 GC: ParNew, ConcurrentMarkSweep Memory: 1237M Cores: 6 Registry: ide.new.welcome.screen.force=true Non-Bundled Plugins: com.konifar.material_icon_generator

Fix for Android Studio 4.0

The plugin has not been working for a few versions of android studio.

The context menu item shows up, but on clicking the import icons dialog does not show up. Probably related to API changes in underlying IntelliJ version upgrades.

Would be great to get this awesome plugin working again 😁

Include other icons

Hey just a quick suggestion. There’s a repository that includes the google material icons but also has icons created by other artists. Seeing that google rarely adds new icons would you be willing to include these as well? It would help the community out a lot as it’s updated constantly and also the artists who created those icons would benefit as well.

Default settings?

Have configurable default settings or set the default to 24dp and white with all DPI’s checked.

UI improvment request

Instead of a long dropdown list, it would be really nice if the icons were displayed in a grid list with a search bar at the top. Clicking an icon would select it and allow adding multiple icons at once.

The ability for a user preference to set their own default color, size, and dpi variants would be really great.

Another great feature would be to detect the icons already used, set them as checked. If an icon is unchecked it should remove that icon from the drawable folders.

Thanks again for this great plugin!

Not working on Android Studio 2.0 Preview

Overview icons link

Current «Overview icons» link is http://google.github.io/material-design-icons/ , which is «Material Icons Guide». Maybe it should be changed to https://design.google.com/icons/ ?

Issues with Icon

Specifically the action/ic_reorder icon has defects. Some of the icons show up as a block instead of the actual icon (36dp xxxhdpi and xhdpi for example, several others have this issue as well).

The plugin steals focus from AS and it can’t be minimized

The plugin steals focus from android studio. Would like a minimize button or at least ability to click back to Android Studio.

Источник

What are material icons?

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

See the full set of material design icons in the Material Icons Library.

Getting icons

The icons are available in several formats and are suitable for different types of projects and platforms, for developers in their apps, and for designers in their mockups or prototypes.

Licensing

We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We’d love attribution in your app’s about screen, but it’s not required. The only thing we ask is that you not re-sell the icons themselves.

Browsing and downloading individual icons

The complete set of material icons are available on the material icon library. The icons are available for download in SVG or PNGs, formats that are suitable for web, Android, and iOS projects or for inclusion in any designer tools.

Downloading everything

Git Repository

The material icons are available from the git repository which contains the complete set of icons including all the various formats we are making available.

Installing icons from bower

Install the icons using the Bower package manager.

Installing icons from npm

Install the icons using npm package manager.

Icon font for the web

The material icon font is the easiest way to incorporate material icons with web projects. We have packaged all the material icons into a single font that takes advantage of the typographic rendering capabilities of modern browsers so that web developers can easily incorporate these icons with only a few lines of code.

Using the font is not only the most convenient method, but it is efficient and looks great:

900+ icons all from a single, small file.
Served from Google Web Font servers or can be self hosted.
Supported by all modern web browsers.
Colored, sized and positioned entirely with CSS.
Vector-based: Looks great at any scale, retina displays, low-dpi display screens.

The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format. By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but this can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites.

Setup Method 1. Using via Google Web Fonts

The easiest way to set up icon fonts for use in any web page is through Google Web Fonts. All you need to do is include a single line of HTML:

Similar to other Google Web Fonts, the correct CSS will be served to activate the ‘Material Icons’ font specific to the browser. An additional CSS class will be declared called .material-icons . Any element that uses this class will have the correct CSS to render these icons from the web font.

Setup Method 2. Self hosting

For those looking to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule:

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:

Using the icons in HTML

It’s easy to incorporate icons into your web page. Here’s a small example:

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

This feature is supported in most modern browsers on both desktop and mobile devices.

Browser	Version supporting ligatures
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Microsoft Edge	18
Opera	15
Apple MobileSafari	iOS 4.2
Android Browser	3.0

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references like the example below:

Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes (here).

Styling icons in material design

These icons were designed to follow the material design guidelines and they look best when using the recommended icon sizes and colors. The styles below make it easy to apply our recommended sizes, colors, and activity states.

Sizing

Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px.

CSS rules for the standard material design sizing guidelines:

Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules can help:

Coloring

Using the icon font allows for easy styling of an icon in any color. In accordance with material design icon guidelines, for active icons we recommend using either black at 54% opacity or white at 100% opacity when displaying these on light or dark backgrounds, respectively. If an icon is disabled or inactive, using black at 26% or white at 30% for light and dark backgrounds, respectively.

Here are some examples, using the material CSS styles described above:

Example for drawing an icon on a light background with a dark foreground color:

Example for drawing an icon on a dark background with a light foreground color:

To set a custom icon color, define a CSS rule specifying the desired color for the font:

and then use the class when referring to the icon:

Icon images for the web

Material icons are also available as regular images, both in PNG and SVG formats.

The material icons are provided as SVGs that are suitable for web projects. Individual icons are downloadable from the material icons library. The SVGs are also available from the material design icons git repository under the path:

For example, icons for maps are in maps/svg/production:

If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. For more information, refer to the documentation in the sprites directory of the git repository.

PNG is the most traditional way to display icons on the web. Our downloads from the material icons library provide both single and double densities for each icon. They are referred to as 1x_web and 2x_web respectively in the download. Icons are also available in the git repository under:

If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. For more information, refer to recommendations in the sprites directory in the git repository.

Icons for Android

PNGs suitable for Android are available from the material icons library. These come in all the supported screen densities so they should look good on any device.

The icons are also available in the material design icons git repository in the same combination of colors and sizes named as follows:

A density-independent VectorDrawable is provided which is supported from Android Lollipop and later:

The Vector Drawable is currently only available as a black 24dp icon. This is for compatibility with our most standard icon size. To render the icon in a different color, use drawable tinting available on Android Lollipop.

When using the Vector Drawable, it may not be necessary to include the xxxhdpi density PNG since it is unlikely a device supporting that screen density does not support Vector Drawables.

Icons for iOS

Material icons also work well within iOS apps. In both the material icons library and git repository, these icons are packaged up in Xcode imagesets which will work easily with Xcode Asset Catalogs (xcassets). These imagesets can be added to any Xcode Asset Catalogs by dragging them into Xcode on to the asset catalog or by copying the folder into the xcasset folder.

The imageset contains the single, double and triple density images (1x, 2x, 3x) so they work on all known iOS screen densities. Both black and white icons are provided, but we recommend using UIImage’s imageWithRenderingMode with UIImageRenderingModeAlwaysTemplate which will allow the image to be used as an alpha mask that can be tinted to any possible color.

Icons in RTL

Languages such as Arabic and Hebrew are read from right-to-left (RTL). For RTL languages, UIs should be mirrored to display most elements in RTL. When a user interface is mirrored for RTL, some of the icons should also be mirrored. When text, layout, and iconography are mirrored to support right-to-left UIs, anything that relates to time should be depicted as moving from right to left. For example, forward points to the left, and backwards points to the right. However, be mindful that the context in which the icon is placed also influences whether an icon should be mirrored or not.

Icons should only be mirrored if their direction matches other UI elements in RTL mode. When an icon represents visual features of your website that are different in RTL, then the icon should also be mirrored in RTL. For example, if the numbers in a numbered list are on the right side in the RTL language, then the numbers should be on the right side of the mirrored icon.

Note: Icons that include a question mark need to be mirrored in Arabic and Farsi, but not in Hebrew. For an in-depth guidance on this topic, please read the Bidirectionality material design spec article.

RTL icons on Android

This Android developer article describes in-depth how to implement RTL user interfaces. By default on Android, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed, either by providing specialized assets for RTL languages, or using framework functionality to mirror the assets.

To provide specialized assets for RTL languages, you can use the ldrtl qualifier on resource directories, such as res/drawable-ldrtl/ . Resources inside such directories will only be used for RTL languages. For devices running Android API 19 or newer, the framework also provides the autoMirrored attribute for Drawables. When this attribute is set to true, the drawable will be automatically mirrored on RTL languages.

If using autoMirrored or providing alternate Drawable resources isn’t an option, the ImageView scaleX attribute can also be used to mirror drawables (for instance, by providing a RTL-specific layout in a res/layout-ldrtl directory).

Mirroring within the layout file:

Lastly, drawables can be mirrored programmatically.

Manually check for layout direction using getLayoutDirection:

Mirroring ImageView contents programmatically:

RTL icons on iOS

iOS has the concept of a UISemanticContentAttribute that is attached to each view. This can be unspecified , forceLeftToRight , forceRightToLeft , playback or spatial . iOS uses this value and the (left-to-right (LTR)/RTL setting of the device presenting the interface to determine the effectiveLayoutDirection of the view. This effectiveLayoutDirection determines whether or not to mirror an image when it is displayed.

By default, images’ semantic content is set to unspecified . This causes them to be mirrored in RTL mode. If you do not want an icon to ever be mirrored, you need to explicitly set it to be forceLeftToRight . Apple calls out some exceptions that should not be mirrored, such as media playback (Fast Forward, rewind, etc.), musical notes, images indicating the passage of time, etc.

For more in-depth documentation on how to implement RTL on iOS and macOS, please review Apple’s RTL documentation.

Semantic content was added in iOS 9. If you are supporting earlier versions of iOS, the material internationalization framework backports some of the functionality to iOS 8.

RTL icons on the web

By default on the web, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed.

The example below shows how to implement a simple RTL CSS rule. You can also view it on codepen.

Generate your own RTL icons using ImageMagick

If mirroring the icons in code is not an option you can use ImageMagick to horizontally mirror the image.

Which icons should be mirrored for RTL?

Here is a list of icons that can be programmatically mirrored to RTL:

Источник

Android material design icon generator