Angular Material - Angular Material Icons - Angular Material Tutorial
Icons in Angular Material?
- The md-icon an Angular directive, is a component to show vector-based icons in application. The md-icon makes it easier to use vector-based icons in your app.
- It supports icon fonts and SVG icons also apart from using Google Material Icons.
learn angular material tutorials - icons Example
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular
Attributes:
Sr.No | Parameter & Description |
---|---|
1 | * md-font-icon This is the string name of CSS icon associated with the font-face, which will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded. |
2 | * md-font-set +This is the CSS style name associated with the font library, which will be assigned as the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname; internally use $mdIconProvider.fontSet(<alias>) to determine the style name. |
3 | * md-svg-src This is the String URL (or expression) used to load, cache, and display an external SVG. |
4 | * md-svg-icon This is the string name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service. |
5 | aria-label This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = "true". If there's no aria-label on the icon nor a label on the parent element, a warning will be logged to the console. |
6 | alt This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = "true". If there's no alt on the icon nor a label on the parent element, a warning will be logged to the console. |
Example:
- The following example showcases the use of md-icons directive to showcase uses of icons.