VueでWEBアプリ(27.5) v-iconが表示できない（未解決）

以前から追加したかった機能として、記事の削除機能を実装しようとしたのですが、うまくいかなかったので簡単に経緯等をここに残しておきます。

参考ページはこちらです。

【Vue.js入門】ユーザ管理画面をVuetify.jsのData tablesで作る

---

上記の参考ページのように、一覧画面の表に操作カラムを追加して、

削除ボタンをゴミ箱アイコンとして表示させようとしたのですが、アイコンの表示がうまくいきませんでした。

こちら↓を参考に

【Vue.js】Vuetifyでアイコンが表示されない場合の原因

npm install @mdi/fontなどもしてみたのですが、うまくいきませんでした…。

おそらく私の作った一覧は行をクリックで詳細画面に飛べるようにしているので、

そもそも行内に操作ボタンを入れるということ自体に無理があったのだと思います。

個人的に行クリックの方が操作が楽かなと思ったのですが、最初に参考にしたものと同じように、行クリックをやめて詳細と削除のボタンを作成したほうがいいのかもしれません。

(2021/09/29 追記）

行クリックでなくしても、削除ボタンではなくただアイコンを表示するだけにしようとしてもアイコンが表示できませんでした…。ただアイコンも使わずボタンとして表示するのもうまくいきませんでした。一覧からチェックを入れたものだけ削除する、という形式にしてみてもいいかもしれません。もう少し調べてみます。

(2021/10/04 追記)

今だ解決せず…。headerは増やせても中身が表示されず

          <v-data-table
            :headers="headers"
            :items="List"
            @click:row="clickRow"
            >
            <!--v-data-tabelのitemsをslotに設定-->
            <template slot="items" slot-scope="props">
              <td class="text-xs-center">{{ props.item.id }}</td>
              <td class="text-xs-center">{{ props.item.title }}</td>
              <td class="text-xs-center">{{ props.item.name }}</td>
              <td class="text-xs-center">{{ props.item.post_date }}</td>
              <td class="text-xs-center">{{ props.item.content }}</td>
              <td class="justify-center layout px-0">
                 <v-btn @click.stop="clickEdit(props.item.id)">編集</v-btn>
              </td>
            </template>
          </v-data-table>

---

この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。

https://github.com/izumi-shibano/test-vue