UNPKG

4.04 kBTypeScriptView Raw
1import { ModuleWithProviders, ElementRef, OnChanges, OnInit, Renderer, SimpleChange, AfterViewChecked } from '@angular/core';
2import { MdError } from '@angular2-material/core';
3import { MdIconRegistry } from './icon-registry';
4export { MdIconRegistry } from './icon-registry';
5/** Exception thrown when an invalid icon name is passed to an md-icon component. */
6export declare class MdIconInvalidNameError extends MdError {
7 constructor(iconName: string);
8}
9/**
10 * Component to display an icon. It can be used in the following ways:
11 * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined
12 * as a child of the <md-icon> component, so that CSS styles can easily be applied to it.
13 * The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its
14 * server must be configured to allow cross-domain requests.
15 * Example:
16 * <md-icon svgSrc="assets/arrow.svg"></md-icon>
17 *
18 * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the
19 * addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of
20 * MdIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format
21 * "[namespace]:[name]", if not the value will be the name of an icon in the default namespace.
22 * Examples:
23 * <md-icon svgIcon="left-arrow"></md-icon>
24 * <md-icon svgIcon="animals:cat"></md-icon>
25 *
26 * - Use a font ligature as an icon by putting the ligature text in the content of the <md-icon>
27 * component. By default the Material icons font is used as described at
28 * http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
29 * alternate font by setting the fontSet input to either the CSS class to apply to use the
30 * desired font, or to an alias previously registered with MdIconRegistry.registerFontClassAlias.
31 * Examples:
32 * <md-icon>home</md-icon>
33 * <md-icon fontSet="myfont">sun</md-icon>
34 *
35 * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
36 * font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
37 * CSS class which causes the glyph to be displayed via a :before selector, as in
38 * https://fortawesome.github.io/Font-Awesome/examples/
39 * Example:
40 * <md-icon fontSet="fa" fontIcon="alarm"></md-icon>
41 */
42export declare class MdIcon implements OnChanges, OnInit, AfterViewChecked {
43 private _element;
44 private _renderer;
45 private _mdIconRegistry;
46 svgSrc: string;
47 svgIcon: string;
48 fontSet: string;
49 fontIcon: string;
50 alt: string;
51 hostAriaLabel: string;
52 private _previousFontSetClass;
53 private _previousFontIconClass;
54 constructor(_element: ElementRef, _renderer: Renderer, _mdIconRegistry: MdIconRegistry);
55 /**
56 * Splits an svgIcon binding value into its icon set and icon name components.
57 * Returns a 2-element array of [(icon set), (icon name)].
58 * The separator for the two fields is ':'. If there is no separator, an empty
59 * string is returned for the icon set and the entire value is returned for
60 * the icon name. If the argument is falsy, returns an array of two empty strings.
61 * Throws a MdIconInvalidNameError if the name contains two or more ':' separators.
62 * Examples:
63 * 'social:cake' -> ['social', 'cake']
64 * 'penguin' -> ['', 'penguin']
65 * null -> ['', '']
66 * 'a:b:c' -> (throws MdIconInvalidNameError)
67 */
68 private _splitIconName(iconName);
69 /** TODO: internal */
70 ngOnChanges(changes: {
71 [propertyName: string]: SimpleChange;
72 }): void;
73 /** TODO: internal */
74 ngOnInit(): void;
75 /** TODO: internal */
76 ngAfterViewChecked(): void;
77 private _updateAriaLabel();
78 private _getAriaLabel();
79 private _usingFontIcon();
80 private _setSvgElement(svg);
81 private _updateFontIconClasses();
82}
83export declare class MdIconModule {
84 static forRoot(): ModuleWithProviders;
85}