Icons
Provides most popular icon fonts and SVGs.
Supported Sets
Dashboard Nile provides a wide range set of icon sets to use:
Basic Usage
You can build your own using the previewer
<!-- Material example -->
<i class="material-icons icon icon-s-32">help</i>
<i class="material-icons-round icon icon-s-32">analytics</i>
<i class="material-icons-outlined icon icon-s-32">more_horiz</i>

<!-- Line Awesome example -->
<i class="las la-universal-access icon icon-s-32 text-primary"></i>

<!-- Feather example -->
<i data-feather="airplay"></i>

<!-- Using bundled SVG icons. Define set and icon names as follows -->
<i-svg set="brands" name="adobe" class="icon icon-s-128 text-primary"></i-svg>
<i-svg set="payment-methods" name="Visa" class="icon icon-s-128 text-primary"></i-svg>
<i-svg set="flags" name="EG" class="icon icon-s-24 text-primary"></i-svg>
<i-svg set="iconly" name="Bulk/Activity" class="icon icon-s-128 text-primary"></i-svg>
Enabling Icon Sets
Enable certain icon sets from the icon component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
  bundles: {
    main: {
      pages: ['**/*.html'],
      components: {
        // ...

        // the icon property should be set to an object, this object will
        // include the enabling rules for some or all icon sets
        icon: {
          // Enable the `bootstrap` icons set by setting property `bootstrap` to true
          bootstrap: true,

          // Enable the `feather` icons set by setting property `feather` to true
          feather: true, // https://www.npmjs.com/package/feather-icons

          // Enable the `lineAwesome` icons set by settings `lineAwesome` to true
          lineAwesome: true, // https://www.npmjs.com/package/line-awesome

          // Enable all variants of material design icons by settings property `material` to true,
          //
          // Or you can define certain sets of the material icon set to be enabled
          // by defining an array of variant names to be enabled
          //
          material: ['regular', 'outlined', 'round', 'sharp', 'two-tone'],

          // Enable fortawesome icons set by setting the property `fontawesome` to an object
          // with the following options
          fontawesome: {
            type: 'webfonts', // svg | webfonts
            styles: ['brands', 'solid', 'regular'], // brands | solid | regular
          }, // https://www.npmjs.com/package/@fortawesome/fontawesome-free
        }

        // ...
      }
    }
  }
}
NameDescription
.iconBase class of the icon element
.icon.icon-s-{12, 14, 16, 18, 20, 22, 24, 32, 36, 48, 64, 128}Applies a certain size to an icon, for example icon icon-s-32
Customize variables at:/library/extend/components/_icon.scss
Component's defaults:/library/components/icon/_defaults.scss
NameDefault valueNote
$icon-prefixicon;
$icon-sizes(12, 14, 16, 18, 20, 22, 24, 32, 36, 48, 64, 128);

Make sure to read the Customize components and Understanding and using the design system guides.

{title}