Can we mix build-in syncfusion icons with other icon set in the Command Columns?

Question

We tried to use syncfusion and font-awesome icons inside the same command column, is it possible?

      commands: [
        {
          type: 'View PDF',
          buttonOption: {
            cssClass: 'e-flat viewpdfbtn',
            iconCss: 'e-export-pdf e-icons',
          },
        },
        {
          type: 'Add To Shopping Cart',
          buttonOption: {
            cssClass: 'e-flat',
            iconCss: 'fa fa-shopping-cart',
          },
        },
      ],

Above code won't work, and the examples I saw using column Template seemed to be way too complicated.

Thanks,

Joseph Christ Nithin Issack · Answer

Based on your query, you want to add both Syncfusion icons
and Front awesome icons in the same command column. Your requirement can be
achieved using the custom command items in which you can set the icons of
Syncfusion and FontAwesome as you wish using the `buttonOpetion.iconCss`
property.Please refer the below code example:

commands: [
         
  {
           
  type: "Delete",
           
  buttonOption: { cssClass: "e-flat", iconCss:
  "e-delete e-icons" },
         
  },
         
  {
           
  type: "Edit",
           
  buttonOption: { cssClass: "e-flat", iconCss:
  "fa fa-edit" },
         
  },
   
        { buttonOption: { cssClass:
  "e-flat", iconCss: "fa fa-info-circle" } },
       
  ],

Sample: https://codesandbox.io/s/242946-vue-timepicker-modified-timepikcer-forked-4tm5pz?file=/src/App.vuePlease add the below link in the index.html file and
you can add the icon to the Grid as you want

Please get back to us for further details.

Wei Cheng · Answer

Hi, Joseph, your example showing the desired result but not clear how you imported the CSS into the Vue project?, I am not seeing it in the App.Vue or main.js or HelloWorld.vue.

In my project's Vue page, I tried to import the CSS, the shopping cart button is NOT showing up inside the Grid after I added:

<style>

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'

</style>

Thanks

Wei Cheng · Answer

After I added the fontawesome.css locally into assets folder in our source code. following is what displaying:

Wei Cheng · Answer

We also have following code in our Main.JS:

import { library } from '@fortawesome/fontawesome-svg-core';
import {
  faSignInAlt, faSignOutAlt, faShoppingCart, faUserAlt, faUserEdit,
  faHome, faInfoCircle, faUserPlus, faUnlock, faFileAlt, faPlusSquare,
  faPlus, faMinus, faWrench, faMinusCircle, faSearch, faMapMarkerAlt,
  faPhoneAlt, faDollarSign, faSitemap, faUserCircle, faUsers, faBriefcase, faFolderOpen, faFile,
  faAddressCard, faUserSecret, faEnvelope, faDesktop, faPlusCircle, faTrashAlt, faEye, faEyeSlash,
} from '@fortawesome/free-solid-svg-icons';
import {
  faProductHunt,
} from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

I wonder whether these actually could have introduced some conflicts with the fontawesome.CSS for some reason.

Joseph Christ Nithin Issack · Answer

As we have mentioned in the previous update you should add
the online link to import the font awesome icons which we have shared in the same
update in head section of the index.html file. Please refer the below
screenshot.Screenshot: Sample: https://codesandbox.io/s/242946-vue-timepicker-modified-timepikcer-forked-4tm5pz?file=/public/index.htmlPlease get back to us for further details.

Wei Cheng · Answer

Hi, Joseph:There seems to be two ways of importing the fontawesome icons:Using the CSS and the TTF\WOFF2 fontsand using the ﻿﻿import { library } from '@fortawesome/fontawesome-svg-core';import {  faSignInAlt, faSignOutAlt, faShoppingCart, faUserAlt, faUserEdit,} from '@fortawesome/free-solid-svg-icons';import { faProductHunt } from '@fortawesome/free-brands-svg-icons';import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';Could we just use the second method and get the fontawesome icons into the datagrid? Setting up fontawesome itself could be quite some effort, and doing both could also introduce conflicts, as there are different versions of fontawesome fonts....4,5,6,7 etc

Joseph Christ Nithin Issack · Answer

Before proceeding to the solution we would like you to
confirm the following.The second method which you have suggested in you update is
used to render the fontawesome icons as a separate vue component. If you want
to use this method you cannot achieve your requirement using command columns,
you should use the column template method to achieve your requirement. Is it ok
for you to use the column template method? Please get back to us for further details.

Wei Cheng · Answer

Thanks, Joseph, we found a work-around, so we are good for now, thanks for your inputs

Joseph Christ Nithin Issack · Answer

Hi Wei,Thanks for your update. We are glad that your issue has been
resolved. Please get back to us for further details.Regards,Joseph
I.