Icon <EIcon> ​

The icon component provides allows you to easily use an icon library.

Size ​

The icons automatically inherit the font size of the parent container.

SVG ​

Instead of font-based icons, you can reference SVG files. Set the type prop to svg and provide the href prop, linking to an SVG file.

Sprite ​

Instead of using a separate SVG file for each icon, you can use SVG sprites by adding the sprite prop:

Font-based ​

You can use any icon library that provides a font-based icon set. See the example configurations for some popular icon libraries.

Example Configuration ​

Below are configurations to make some popular icon libraries work with Elements. The following configurations are made in the global configuration. You can also set the props directly on the EIcon component.

Bootstrap Icons ​

Import in your .scss file:

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');

Add the following entry for EIcon in the global configuration:

EIcon: {
  config: {
    tag: 'i',
    type: 'class',
    prefix: 'bi-',
    className: ''
  }
}

EIcon: {
  config: {
    tag: 'i',
    type: 'class',
    prefix: 'bi-',
    className: ''
  }
}

Material Icons ​

Import in your .scss file:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Add the following entry for EIcon in the global configuration:

EIcon: {
  config: {
    tag: 'span',
    type: 'inline',
    prefix: '',
    className: 'material-icons'
  }
}

EIcon: {
  config: {
    tag: 'span',
    type: 'inline',
    prefix: '',
    className: 'material-icons'
  }
}

Component Reference ​