Icons

Code Examples

Spark does not provide icons directly. What you see below are proprietary icons in use by Quicken Loans. To supply your own icon set, you need to import an svg that contains symbols for the ids referenced below. This symbol file should occur in the DOM before the first use element.

Angular Information

The sprk-icon component expects that the icon set has been imported. See below for available customization options:

Component Input Type Description
sprk-icon iconType string Determines which icon is rendered. Expects the value to match the name referenced (i.e. 'chevron-down', instead of 'chevron down').
sprk-icon additionalClasses string Expects a space-separated list of class names to append to the class attribute of the icon. Useful for assigning icon sizes.

Icon Sizing

There are four sizes available for all icons. The default for all icons is 16px by 16px, you can use the modifiers below to adjust the size.

  
    // Modifier Classes
    .sprk-c-Icon--l
    .sprk-c-Icon--xl
    .sprk-c-Icon--xxl
  

Icons