I've calculated the width of a   in Avenir Next by

• Measuring the width of the text text space, which includes a space (107.750px)
• Measure the width of the text textspace, without the space (102.793px)
• Calculating the difference, then dividing by the font-size (16px) to get the size in em
  • (107.750 - 102.793) / 16 = 0.3098125em

I've then used that as the base margin between icon and text for our prototype.

https://deploy-preview-131--cfpb-design-stories.netlify.app/?path=/story/components-icon--icon-with-text

@meissadia

In looking at the table:

• Known use cases include: Icon + Text / Text + Icon / Round Icon + Text
• We can remove the square icon examples. The square icons are for social media and typically appear all together in a row and without text.
• I don’t think there’s a use case for a round icon to the right of text (@contolini can you think of any?)
• Is there something going on with the vertical alignment of the icons in the table. The icons look misaligned vertically (they look high).

@natalia-fitzgerald Updated to reflect known use cases

Icon alignment looks improved in the latest deployment. I didn't change anything to specifically address that...so not sure what was going wrong in the first iteration.

Alignment still looks off for <p> and <a> elements? But I'm not sure why.

Alignment still looks off for <p> and <a> elements? But I'm not sure why.

@natalia-fitzgerald Issue seems related to a couple things:

• Icon sitting next to a lower case character
• Lower case character having an ascender vs descender
  • icon looks well aligned next to letter with ascender (h)
  • looks off next to a descender (p) or neither (a)

Lower case / descender	Upper case	Ascender

Not sure there is a consistent styling fix for this or if it would fall under design usage guidelines i.e. Don't use icons next to words that begin with a lower case letter.

@meissadia - Can you show this table with a circle icon for comparison?

@natalia-fitzgerald

Lower case / descender	Upper case	Ascender

@meissadia - Does the vertical alignment shown here match what is done on the rest of the site and in the Design System?

@natalia-fitzgerald I hacked together this example by editing the HTML on the CFPB Iconography page and, yes, it appears that this behavior is consistent with the CFPB DS, and thus should also reflect how the SBL site would render icons.

Trying to find a way to accomplish this consistent spacing via CSS, so that devs would not need to encapsulate text+icon in any special wrappers...but it seems that CSS does not have the ability to recognize plain text. So targeting scenarios where the icon comes before/after text, and applying the appropriate spacing, is proving more involved than I'd hoped.

After listing out the investigation below, I'm tempted to say that continuing with the current approach of "Devs just need to insert a   between an icon and adjacent text" may actually be the most sustainable approach.

Alternative approaches:

• Add props to the <Icon /> component that accept text and handle the spacing
  • Ex: <Icon name='info' textRight="This text would display to the right of the icon with a margin between" />
  • Ex: <Icon name='info' textLeft="This text would display to the left of the icon with a margin between" />
  • Pros
    • Makes it easy to create both the icon and it's accompanying text in a single component
  • Cons
    • May not be the most intuitive approach so we would want to call this out in our documentation
• Create an helper/wrapper component for text that appears next to an icon, which we could then target via CSS
  • Ex. <><Icon name='info' /><IconText>This text appears next to an icon</IconText><>
  • Pros
    • Takes care of the need for devs to be responsible for inserting the space between icon/text
  • Cons
    • Devs still have to know to wrap icon-adjacent text in the special wrapper in order to get the proper spacing
• Integrate an icon prop into components that commonly display icons
  • Ex. Link w/ icon: <Link href="#" icon="download">Download font</Link>
    • This would automatically insert the named icon after the link text with appropriate styling and spacing.

Examples from CF.gov of text + icon

• https://www.consumerfinance.gov/owning-a-home/
  • Lots of download links
  • One H3 with icon before text
    
• https://www.consumerfinance.gov/consumer-tools/educator-tools/
  • More headers w/ icons
    
• https://www.consumerfinance.gov/activity-log/
  

DS Heading with Icon variant: https://cfpb.github.io/design-system/foundation/headings#variations-1

Classes used in the examples above

• Owning a home (meta header): .m-meta-header_item .cf-icon-svg
• Activity log (heading icon): .a-heading__icon
• Owning a home (plain icon): .cf-icon-svg

Possible solution:

• Apply left and right margin to all .cf-icon-svg
  • If icon is first element within it's container, remove the left margin
  • If icon is last element within it's container, remove the right margin
  • Otherwise, leave margins as-is to provide consistent space between icons and everything else
  • Side effects
    • Would need to adjust .a-heading__icon styles

TODO: I need to try this out in code to see how achievable it is.

@natalia-fitzgerald

So I don't think we can achieve the consistent spacing we're looking for without requiring significant retrofitting for all existing usages of DS icons.

The table below demonstrates an extreme example of the approach described above.

In the first two columns the SVG element appears next to raw text i.e. <svg>Text
In the last two columns, the text is wrapped in an HTML element i.e. <svg><span>Text</span>

CSS cannot target raw text, so in order to apply CSS based spacing between icons and text, we'd need to wrap that text in an HTML element (last two columns), which means this approach would need to be retroactively applied in ALL instances where the spacing is currently achieved by putting a space(' ' or  ) between the icon and the text.

This seems like a significant overhaul to all of CF.gov and probably outside the scope of our current efforts.

That said, we can still achieve this consistent spacing in DSR and the SBL app. So we can discuss if we'd like to move forward with this.

@meissadia
Nice work looking into this! We should share it with the DS team for awareness even if it’s not feasible on the larger scale. Next week let’s discuss what it would mean to implement this within the DSR.