CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Mukesh Manoharan
Mukesh Manoharan

Reputation: 53

How to use Outline icons in Vuetify app?

<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.

Upvotes: 5

Views: 13574

Answers (4)

alsator
alsator

Reputation: 121

<v-icon>
   mdi-calendar-month-outline
</v-icon>

Add "-outline" to icon name

Upvotes: 0

Nick D
Nick D

Reputation: 651

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.

Upvotes: 1

Fi Li Ppo
Fi Li Ppo

Reputation: 187

@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!)

Upvotes: 1

Toodoo
Toodoo

Reputation: 8750

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

Upvotes: 5

Related Questions