Replace material icon with my own custom icon

[acros]

Im using the table component:
https://quasar.dev/vue-components/table

but want to replace the icon with my own custom icons. In chrome inspector it says for example:

<i aria-hidden="true" role="img" class="material-icons q-icon notranslate">chevron_left</i>

How can I replace this “chevron_left” with “mycustomimg.png”

This works but seems like a bit of a hack more than a proper solution:

framework: {
      iconSet: 'fontawesome-v5',

leaving this result:

<i aria-hidden="true" role="img" class="fas fa-chevron-left q-icon notranslate"> </i>

and then change the css

.fa-chevron-left:before{
    background-image:url("../assets/icon_back.png");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
    content:"";
}

How is the proper way of doing this?

[Hawkeye64]

@acros Read up on it here: https://quasar.dev/vue-components/icon#Custom-mapping

[acros]

Thanks. Yes I saw that page but as far as I understand I cannot reach and modify the class that calls the icon that easy since it is inside the component. Im pretty new to quasar after using vue but its not obvious to me how to reach the classes inside the component. In my case I obviously want to replace this:

<i aria-hidden="true" role="img" class="material-icons q-icon notranslate">chevron_left</i>

with something like this:

<i aria-hidden="true" role="img" class="my-custom-icon"> </i>

.my-custom-icon {
    background-image:url("../assets/icon_back.png");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
}

but cannot really see how this will be done except for the solution I already tried. It seems like a bit of a hack though to me … or is maybe something like this fine where Im simply overriding the css with my own using fontawsome-v5

<i aria-hidden="true" role="img" class="fas fa-chevron-left q-icon notranslate"> </i>

and

.fa-chevron-right {
    background-image:url("../assets/quasar-logo-full.svg");
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
}

This do work but again seems like a hacky solution?

[acros]

This post is deleted!

[tozuo]

@acros, as @Hawkeye64 mentioned - in my case it’s [ in App.vue ]

  created () {
    this.$q.iconMapFn = (iconName) => {
      if (iconName.startsWith('chevron_left') === true) {
        return { cls: 'fal fa-chevron-left' }
      }
      if (iconName.startsWith('chevron_right') === true) {
        return { cls: 'fal fa-chevron-right' }
      }
    }
  },