getIconContentCSS()

This function is part of Iconify Utils package.

Function getIconContentCSS() generates stylesheet to render an icon as content of pseudo-element.

It generates code only for one icon. To generate code for multiple icons at the same time, see getIconsContentCSS().

If, instead of using icon as content of a pseudo-element, you want to use icon as a background or mask image, see getIconCSS().

To use icon in HTML, all you need to do is create any element, such as <span> with class name that you passed in iconSelector option.

Color and size

When using icon as content of pseudo-element, currentColor cannot be used, so icon must have a hardcoded color.

Icon also must have fixed dimensions, which cannot be changed in CSS.

If you want to use an icon with currentColor in CSS or want to resize icon using CSS, you should use getIconCSS() instead.

Usage

Function has the following parameters:

• icon, IconifyIcon. Icon data.
• options. Options object.

Function returns string with stylesheet for icon.

Options

The options object has the following properties:

• height, number. Icon height. Required.
• width, number. Icon width, optional. If not set, it is calculated using icon's width/height ratio and height option.
• color, string. Color to replace currentColor with. This should be used to change color of monotone icon, otherwise icon will be rendered black.
• iconSelector, string. Selector for icon, defaults to ".icon::after".
• format. Stylesheet formatting option. Matches options used in Sass. Supported values: "expanded", "compact", "compressed".
• rules, Record<string,string>. Extra rules to add to CSS.

Result

Example of generated stylesheet:

css.icon::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}

That code can be used in HTML with any element, such as <span> with class name that you passed in iconSelector option:

html<span class="icon"></span>

Color option

Important note about color option: you cannot use CSS variables. Color is not added to style, it is changed inside icon. Icon is not inlined in HTML, it is treated as an external resource. Elements of icon cannot be targeted or styled, just like any other image linked with url(), therefore, CSS variables are not available in icon.

Example

generate-css.ts

tsimport { getIconContentCSS } from '@iconify/utils';

// Icon data
const iconData = {
   body: '<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconContentCSS(iconData, {
   iconSelector: '.icon-home::after',
   height: 24, // Required
   color: '#f00' // Changes `currentColor` to `#f00`
});

// Log stylesheet
console.log(css);

Result:

css.icon-home::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23f00' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}

Usage in HTML:

html<span class="icon-home"></span>