🎨 Material Icons page of the Indigo.Design System you will find 150+ icons imported from Material resources and 250+ icons crafted by the Indigo.Design System team according to the Material system icons guidelines. Icons are used to symbolize common actions in Icon Buttons, List Items, Cards etc. to reduce the amount of text that is normally used as a Button label, for example. Icon colors are defined via the
Layer Styles for colors, which lets you customize the color appearance of an icon in the designs that you are crafting. All icons are also supported in Ignite UI for Angular.
There is also a dedicated Icon component with four sizes: ExtraLarge, Large, Medium and Small. Use it when creating intricate layouts for articles, custom Cards and List Items etc. assigning one of the glyphs available under
🎨 Material Icons rather than inserting it directly on your artboard.
Available Material Icons
There is a set of 150+ Material Icons already available in the Indigo.Design System, which is grouped in the following way according to the Material Design categorization:
There is also a set of 250+ additional Material Icons that our team has crafted as an extention to the original Material set for the following categories:
- social media
These icons are also available on GitHub to use in your projects.
With the preset collection of icons, you can design beautiful apps and pick the right symbolic representations for your Components and Patterns. Adding further icon sets is possible, but so is extending the current one with further Material Icons. Since Ignite UI for Angular supports any Material Icon out there, this could be exactly what you are looking for. To do so, follow these simple steps:
First, navigate your browser to the Material Design Icons Tool. Search for the icon you need, e.g.
copyright, download it as an SVG, and note the category to which it belongs. In this case, would be
Action. Now, open up the Indigo.Design library in Sketch navigate to the
🎨 Material Iconspage and look if that same category exists as a text layer on the left. If it does not, create it and follow the steps below. If it does, which is our case for the
copyrighticon from the
Actioncategory, just find the right-most icon from that category and you should be looking at something like this.
Now, duplicate the Symbol for this right-most icon and move it right a bit. Its name should end with
...Copyand its layers structure should look like this:
Layer Use Color Defines the icon shape and color Shape Always a rectangle that defines the icon bounding box
Next, we want to replace the existing icon shape with the SVG we have downloaded, so we need to select the Color layer and drag and drop the SVG with the
copyrighticon on top of it. This will create a new group
copyright-24pxin our layers panel, which we need to expand and drag the desired icon shape just outside of this group, but above the rectangular Shape layer.
Let's remove the old icon glyph now and the leftover group after moving the new icon shape out of it. Then, we have to select the one and only icon shape we have left with the
copyrightsymbol change its name to
Colorand set its appearance to
After updating the Symbol name accordingly, we are all set to use this icon just like any other one.
Our community is active and always welcoming to new ideas.