mdIcon: Icons based on SVG, font-faces, and CSS

[ThomasBurleson]

A suite of icons should be support within Angular Material. Many components (BottomSheet, Lists, Cards, Chips, FABs, etc.) will use md-icon as a child element.

Icon Types

While Material Design icons come with SVG and CSS sprites for various resolutions, the full set of icons is enumerated below:

• SVG
• Animated SVG
• Color SVG
• Font Faces
• PNG
• JPEG

A live preview of all icons in the Material-Icons repository is shown here: Live Preview

Visual requirements:

- Font-icons only - class name used to specify desired icon; e.g. `` - Hover effects to animate, colorize, etc. - Media support for responsive changes - Support for Dark themes

Functional requirements:

- Ability to use remote SVG, PNG, or JPEG resources - Ability to use embedded (aka inlined) resources

Questions:

- How can developers easily select a subset of icons for their needs? - How can developers easily embedded their own SVGs ? - Can we provide a template and a batch gulp tool to easily embedded a first-pass rendition of 1..n remote SVGs ? - How will the icons be deployed as part of Angular Material releases ? - Will Theming impact icon choices (colors) ? ### Additional Resources - [FlatIcon](http://www.flaticon.com/packs/material-design) - [SVG Animations and CSS Transforms](http://css-tricks.com/svg-animation-on-css-transforms/) - http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html - http://www.sitepoint.com/tips-accessible-svg/ ### Version 2 Wishlist - SVG support for colors and animations - Multi-state icons may be needed where each state is represented by animated SVGs - See [FAB with Progress Indicators](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B0NGgBg38lWWbTlSaHdQZEMtalk/components-progressactivity-typesofindicators-061101_Circular_Aspirational_xhdpi_002.webm) - State features are not for user-interactions but rather for icon animations. - More information is needed about transitions between animation states of icons - State support; where each state display an icon visualization. State changes update visuals. - This would be very powerful...

Here is a sample of states with md-icon

 <md-icon>
  <md-icon-state state="start" src="" />
  <md-icon-state state="animated" src="" />
  <md-icon-state state="done" src="" />
</md-icon>

Design Doc

A Google design document will be prepared to present issues, constraints, solutions, and impacts.

[ThomasBurleson]

Aria Considerations

If no label is required on <md-icon> itself, this creates potential ARIA issues leaving the parent element responsible for labeling (and throwing errors).

For example:

<md-button class="md-fab md-primary">
  <md-tooltip>
    Refresh
  </md-tooltip>
  <md-icon icon="ic_refresh"></md-icon>
</md-button>

This fails for accessibility because <md-tooltip> does not provide an accessible name for <md-button>. This should be the responsibility of <md-icon>, either by providing aria-label or some other labeling mechanism.

If we enforce aria-label on <md-icon>, we will need to update $mdAria.expect to check for aria-label on child nodes.

Opened issue #567.

[ilanbiala]

@ThomasBurleson will this depend on angular-material-icons?

[CICCIOSGAMINO]

Actually i use the directive md-icon like this :

 <md-icon icon="bower_components/material-design-icons/action/svg/design/ic_android_24px.svg"></md-icon>

how can set a different color or size in md-icon ?

[marcysutton]

Should we leave SVG out of @font-face resources? @robertmesserle mentioned using it for anti-aliasing in Chrome/IE, but it is being deprecated in Chrome (and possibly Firefox). https://groups.google.com/forum/#!topic/icomoon/ttjKOE7fEv8

Inline SVG is good as long as we expose alternate text.

[ThomasBurleson]

As recently discussed, we will still support Javascript overrides for SVG content in mdIcons.
But that will be part #2. Part #1 will support font faces.

[cristiano-belloni]

Also, http://materialdesignicons.com/ - cool icons drawn by the community.

[justindujardin]

There are a few material design icons that will not convert well to fonts: the editor color selection icons and the device wifi/signal/battery icons. Will these be supported in some way?

[calidion]

i would like to know how to incorporate fontawesome icons into md-icon.

[ThomasBurleson]

Using FontAwesome with <md-icon />: CodePen Demo

[calidion]

great.

[utopiaio]

i don't know whether or not i should create an issue, but when going through 0.8.0-rc1, the md-icon used on md-tabs is barely visible on iOS devices

[3Pi]

What is the right way for using material icons (as shown on Google Material Design Icons in a md-button ?
Ligatures are OK wherever else but in md-buttons and I didn't find out how to use md-font-icon properly...

[edaquinta]

Hey, I know this issue is closed but I still don't get how I can use the Material Icons (http://google.github.io/material-design-icons/) with the directive in a seamless way. I think I still need some CSS individual classes to use md-font-icon right?

[edaquinta]

btw, I create my own approach:

CSS

.menu:after { content: "\E5D2" }

HTML

< md-icon md-font-icon="menu" >< /md-icon >

so I define the icons I'll be using but probably I working double, maybe there is a better way, but I didn't find it cause I don't wanna use the svg, just the web font.

[ThomasBurleson]

@edaquinta plz open a new issue.
@Moe-Szyslak - do you still have this issue with the code in master? If yes, plz open a new issue with a Demo.
@3Pi - Please post this in the Angular Material Forum