Icon Paragraph

Icon paragraph can be stand-alone content and nested within other paragraphs that requires icons such as Button, Text Link, Action Blocks, etc.

Icon
  • Choose an icon from the library
Note: color theme handles both icon and shape colors, icon color will be ignored when shape color theme is used.
Shape

  • Spacing Overrides

  • Additional Attributes

    Note: HTML and aria attributes are allowed.

    + Add another attribute

Overrides

Custom icon workflow

Icon

Output markup

...


  
    ...

Dev Notes

  1. Clicking "Select icon" will bring up the icon library for user to select a specific icon.
  2. Clicking "Use custom icon" will bring up an extra textarea input for raw SVG code. Appropriate icon and shape classes will be added to this custom code in the back-end.
  3. Overrides maps up to utility classes, these classes will either go on the svg element or the span element with the shape classes (if a shape is chosen).
  4. In the Custom Icon Workflow, clicking "remove custom icon" will bring back the view with 2 buttons ("select icon" and "use custom icon").