5
<v-btn outline large fab color="indigo">
   <v-icon>edit</v-icon>
</v-btn>

In vuetify.js docs, the example only have outlined icons using buttons. But my requirement is to get outlined icons without using buttons.

david
  • 3,225
  • 9
  • 30
  • 43
Mukesh Manoharan
  • 53
  • 1
  • 1
  • 6
  • 2
    I'll put this as related because of possible changes in the future: https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and – Traxo Jul 17 '18 at 08:39
  • Looking forward more about this topic. Thank you! – Mukesh Manoharan Jul 17 '18 at 10:09

4 Answers4

5

You can do it by only adding CSS.

Something like that :

HTML

<v-icon class="outlined">edit</v-icon>

CSS

.v-icon.outlined {
                  border: 1px solid currentColor;
                  border-radius:50%;
                  height: 56px;
                  width: 56px;
}

Working CodePen

Toodoo
  • 8,570
  • 6
  • 35
  • 58
1

@Toodoo's solution above is the simplest and most effective, but for whatever reason was not working for me.

I bumped on this wonderful font, derived directly from Material's, which can be very easily imported into any component:

<style lang="scss" scoped> 
@import '~material-icon-font/dist/Material-Icons.css';
.material-icons { font-family: 'Material Icons Outline'}
</style>

... and voila', no need to create any custom classes, all icons will magically by outlined (see documentation for more options, and give the guy a star!)

Fi Li Ppo
  • 107
  • 11
1

First, make sure to download Material Design Icons (including Outlined) in your index.html file:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" />

Now, you can use Outlined icons by simply adding material-icons-outlined class to your v-icon's.

Example:

<v-icon class="material-icons-outlined">
  file_upload
</v-icon>

In case you need to use an outlined icon in your :prepend-icon, :append-icon, etc. use a corresponding slot:

<v-autocomplete
  ...
>
  <template v-slot:prepend>
    <v-icon class="material-icons-outlined">
      file_upload
    </v-icon>
  </template>
</v-autocomplete>

The latter works with pretty much all kinds of form inputs in Vuetify.

Nick D
  • 531
  • 4
  • 15
0
<v-icon>
   mdi-calendar-month-outline
</v-icon>

Add "-outline" to icon name

alsator
  • 121
  • 1
  • 1
  • 5