Значки Vue mdi внутри строки

#vue.js #ag-grid #mdi

#vue.js #ag-сетка #mdi

Вопрос:

Как я могу использовать значки mdi внутри строки и возвращать ее в методе, который будет действовать как компонент ячейки в таблице aggrid.

 import { mdiPencil } from "@mdi/js";
data(){
  return{
    mdiPencil
  }
}
methods:{
 viewButton() {
   return `<v-btn icon><v-icon>{{ mdiPencil }}</v-icon></v-btn>`;
 },
}
  

Выше приведен мой метод. На данный момент он отображается {{mdiPencil}} в виде строки, а не значка в ячейке таблицы aggrid. Как мне отобразить значок?

Комментарии:

1. Как вы отображаете эту строку?

2. Почему бы просто не использовать разметку в вашем шаблоне?

Ответ №1:

Вы можете попробовать

 return `<svg role="img" class="v-icon__svg">
        <path d="${mdiPencil}"></path>
      </svg>`;