How to make a modal with a top-left close icon?

[sneko]

Hi,

I saw some examples like that for Material Design:

But didn't see any option in the v-dialog to have the close icon by default. Any example to make the thing the most clean?

Thank you,

[sneko]

Hmmmm the "nesting dialog" (https://vuetifyjs.com/en/components/dialogs/#nesting) samples show a way to have an icon in the corner:

      <v-dialog
        v-model="dialog3"
        max-width="500px"
      >
        <v-card>
          <v-card-title>
            <span>Dialog 3</span>
            <v-spacer></v-spacer>
            <v-menu
              bottom
              left
            >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, i) in items"
                  :key="i"
                  @click="() => {}"
                >
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-card-title>
          <v-card-actions>
            <v-btn
              color="primary"
              text
              @click="dialog3 = false"
            >
              Close
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

That's not the easiest way just for a closing thing, but will be fine :)

[MND13]

All it needed was the <v-spacer></v-spacer> tag before the close icon

   <v-card-title>Dialog Title
                  <v-spacer></v-spacer>
                 <v-btn icon @click="dialog = false" >
                  <v-icon>mdi-close</v-icon>
                </v-btn>
              </v-card-title>