I am importing tabler icons in a cdn in my public html folder:

<link rel="stylesheet" href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">

and per the Vuetify docs bringing in the icon library (in plugins/vuetify.js):

export default new Vuetify({
    icons: {
        iconfont: "ti",
    }

This allows me to use <v-icon>ti-pencil<v-icon> (as example) in Vue2 components. All of this works just fine. However, when the icons are inside of the <v-navigation-drawer> they are larger and the lines are little too thick. I have only seen the size property that works, but it also shrinks the icon, which is not what I want.

Is there a way to change the stroke width on the svgs with css? Or is there another way to affect the thickness of these paths after being imported? Also adjustments to font-weight are possible but sadly have no effect on the element.

Thanks in advance for any help.

CodePudding user response：

• You need to target the icon with Css selectors and adjust the font-weight

Take a look at this codepen.

• If you are dealing with Svgs, you can play with viewBox="0 0 24 24" values and change their value!(Which is not recommended)