Here is a list of all currently used icons in Mantid. These icons are from Material Design Icons (3.6.95), an open source icon project by Google. Best place to find new unused icons is on the cheatsheet. A developer who adds a new icon to a GUI should update this list with it’s specific usage if it can be used anywhere else in the codebase. Icons with UI Widgets. Icons can be nested into all components and their items. You can put an icon on the Toolbar in the form of buttons, decorate Tabbar tabs and Accordion panes as well as List and DataView items with them, etc. Icons can be initialized in the following ways.
Basic Icons
You can place Material Design Iconic Font icons just about anywhere using the CSS Prefix zmdi and the icon's name.
Larger Icons
zmdi-hc-lg
zmdi-hc-2x
zmdi-hc-3x
zmdi-hc-4x
zmdi-hc-5x
To increase icon sizes relative to their container, use the zmdi-hc-lg, zmdi-hc-2x, zmdi-hc-3x, zmdi-hc-4x, or zmdi-hc-5x classes.
Fixed Width Icons
Use zmdi-hc-fw Vnc for a mac. to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
List Icons
Use zmdi-hc-ul and zmdi-hc-li to replace default bullets in unordered lists.
Bordered & Pulled Icons
In 1842, Babbage was invited to give a seminar at the University of Turin about his Analytical Engine. Luigi Menabrea, a young Italian engineer, and future Prime Minister of Italy, wrote up Babbage's lecture in French, and this transcript was subsequently published in the Bibliothèque universelle de Genève in October 1842.
Use zmdi-hc-border or zmdi-hc-border-circle and pull-right or pull-left for easy pull quotes or article icons.
Spinning Icons
Use the zmdi-hc-spin or zmdi-hc-spin-reverse class to get any icon to rotate. Works well with zmdi-settings or zmdi-replay.
Spinning
Reverse spinning
For IE users: CSS3 animations are supported in IE10+.
Rotated & Flipped
To arbitrarily rotate and flip icons, use the zmdi-hc-rotate-* and zmdi-hc-flip-* classes.
Stacked Icons
inversed zmdi-polymer on zmdi-circle
red zmdi-block on zmdi-phone
To stack multiple icons, use the zmdi-hc-stack class on the parent, the zmdi-hc-stack-1x for the regularly sized icon, and zmdi-hc-stack-2x for the larger icon. zmdi-hc-inverse or other color classes can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.
In last example for red color I using Material Design Color Palette library
Colored Icons
You can change icon color by changing color css property.
Or you can use Material Design Color Palette css toolkit for all material design colors.
Mdi Material Design Icons
Animated Icons
Mdi Icons List
You can place animating icons by using CSS3 Animation.
Or you can use one of the css-animation library, for example: Animate.css.
In last example for blue color I using Material Design Color Palette library