Hey Again,

At the moment there is no such integration method or process available. However escalating this to the developer for further response on this.

Thanks 

Hey Mark,

The easiest/most straightforward way to use a custom SVG icon would be to create a CSS rule to overload an existing icon. Here's an example of overloading an icon with the Fancy box element that you can add into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:

.nectar-flip-box svg {
  background-size: cover;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
}
/* hide default icon */
.nectar-flip-box svg path {
  visibility: hidden;
}

It would be possible to create as many of these rules to target different fancy boxes/tabbed items. If you'd like to provide your temporary live site so I can see the elements you're trying to add custom icons to, I could provide more example snippets.

Thanks in advance

Hey Mark,

The CSS will affect all pages that use the same structure, so you won't need to add it to each page individually. 

You'll need to give the parent column holding each element you wish to modify a unique class name so that it can be isolated with these custom rules. For example, 

Those class names can then be used in the CSS like so:

/* hide default icon */
.top-benefits .nectar-flip-box svg path,
.how-to-tabs .tabbed .wpb_tabs_nav svg path {
  visibility: hidden;
}
.top-benefits .nectar-flip-box svg,
.how-to-tabs .tabbed .wpb_tabs_nav svg {
  background-size: cover;
}
/* custom flip box icons */
.top-benefits .nectar-flip-box svg {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
}
/* custom tab icons */
.how-to-tabs .wpb_tabs_nav li:nth-child(1) svg {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
}
.how-to-tabs .wpb_tabs_nav li:nth-child(2) svg {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
}
.how-to-tabs .wpb_tabs_nav li:nth-child(3) svg {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
}

For the tabs, make sure you've selected an icon for each tab and that the icon is within the "iconsminds" family in order to have the CSS work.

Kind regards

Hey Mark, glad to hear

1. You can adjust the icons sizing by using the following CSS rule:

.tabbed[data-style*="material"] .wpb_tabs_nav li svg {
    width: 50px;
}

2. The font styling/sizing will inherit from the Salient options panel > Typography > General HTML elements tab via the "Form and Category Labels" field.

Cheers

Hey Mark, glad I could help!

The size should currently remain consistent regardless of the viewport. However, you can add in another rule to set a size specific to mobile like so:

@media only screen and (max-width: 1000px) {
  .tabbed[data-style*="material"] .wpb_tabs_nav li svg {
      width: 30px;
  }
}