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.

Information

  • The icon fill and stroke colors can be changed by setting the $icon-fill-color and $icon-stroke-color variables to something other than the default that Spark provides. Additionally, if you need to have the icon's fill/stroke use the color of its parent container you can apply the .sprk-c-Icon--stroke-current-color modifier to the icon.

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).

Configurable Variables

Variable Default Description
$sprk-icon-m 16px The default icon height and width.
$sprk-icon-l 32px The large icon height and width.
$sprk-icon-xl 64px The extra large icon height and width.
$sprk-icon-xxl 128px The extra extra large icon height and width.
$sprk-icon-fill-color none Sets the fill color of the icons.
$sprk-icon-stroke-color $sprk-black Sets the stroke color of the icons.
$sprk-icon-filled-stroke-color none Sets the stroke color of filled icons.
$sprk-icon-filled-fill-color $sprk-black Sets the fill color of filled icons.
$sprk-icon-using-custom-stroke true Boolean value for if you want to use a custom stroke-width setting on the icons.
$sprk-icon-custom-stroke-width-s 1px The stroke width setting for small.
$sprk-icon-custom-stroke-width-m 1.5px The stroke width setting for medium.
$sprk-icon-custom-stroke-width-l 2px The stroke width setting for large.
$sprk-icon-custom-stroke-width-xl 3px The stroke width setting for extra large.

Class Modifiers

Class Description
.sprk-c-Icon--stroke-current-color Sets the fill and stroke properties to the current color of its container.
.sprk-c-Icon--l Sets the icon height and width to $sprk-icon-l and stroke-width to $icon-custom-stroke-width-l.
.sprk-c-Icon--xl Sets the icon height and width to $icon-xl and stroke-width to $icon-custom-stroke-width-m.
.sprk-c-Icon--xxl Sets the icon height and width to $icon-xxl and stroke-width to $icon-custom-stroke-width-s.
.sprk-c-Icon--toggle Sets up the intial state for icons that serve as toggle controls.
.sprk-c-Icon--open Rotates icons -180 degrees. Should be used in conjunction with .sprk-c-Icon--toggle.

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 three additional size modifiers listed in the above table.

Icons