123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { Ion } from '../ion';
  4. /**
  5. * @name Icon
  6. * @description
  7. * Icons can be used on their own, or inside of a number of Ionic components.
  8. * For a full list of available icons, check out the
  9. * [Ionicons docs](../../../../ionicons).
  10. *
  11. * One feature of Ionicons in Ionic is when icon names are set, the actual icon
  12. * which is rendered can change slightly depending on the mode the app is
  13. * running from. For example, by setting the icon name of `alarm`, on iOS the
  14. * icon will automatically apply `ios-alarm`, and on Material Design it will
  15. * automatically apply `md-alarm`. This allows the developer to write the
  16. * markup once while Ionic applies the appropriate icon based on the mode.
  17. *
  18. * @usage
  19. * ```html
  20. * <!-- automatically uses the correct "star" icon depending on the mode -->
  21. * <ion-icon name="star"></ion-icon>
  22. *
  23. * <!-- explicity set the icon for each mode -->
  24. * <ion-icon ios="ios-home" md="md-home"></ion-icon>
  25. *
  26. * <!-- always use the same icon, no matter what the mode -->
  27. * <ion-icon name="ios-clock"></ion-icon>
  28. * <ion-icon name="logo-twitter"></ion-icon>
  29. * ```
  30. *
  31. * @demo /docs/demos/src/icon/
  32. * @see {@link /docs/components#icons Icon Component Docs}
  33. *
  34. */
  35. export declare class Icon extends Ion {
  36. /** @hidden */
  37. _iconMode: string;
  38. /** @hidden */
  39. _isActive: boolean;
  40. /** @hidden */
  41. _name: string;
  42. /** @hidden */
  43. _ios: string;
  44. /** @hidden */
  45. _md: string;
  46. /** @hidden */
  47. _css: string;
  48. constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
  49. /**
  50. * @hidden
  51. */
  52. ngOnDestroy(): void;
  53. /**
  54. * @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode.
  55. * For more information, see [Ionicons](/docs/ionicons/).
  56. */
  57. name: string;
  58. /**
  59. * @input {string} Specifies which icon to use on `ios` mode.
  60. */
  61. ios: string;
  62. /**
  63. * @input {string} Specifies which icon to use on `md` mode.
  64. */
  65. md: string;
  66. /**
  67. * @input {boolean} If true, the icon is styled with an "active" appearance.
  68. * An active icon is filled in, and an inactive icon is the outline of the icon.
  69. * The `isActive` property is largely used by the tabbar. Only affects `ios` icons.
  70. */
  71. isActive: boolean;
  72. /**
  73. * @hidden
  74. */
  75. _hidden: boolean;
  76. /**
  77. * @hidden
  78. */
  79. update(): void;
  80. }