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.

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("icon-1", "icon-2", "icon-1", etc).

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.
sprk-icon idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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