I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead.
With the web font, an example of a heading that includes an icon looks like this:
<template>
<h1>
<v-icon>mdi-format-list-bulleted</v-icon>
My Heading
</h1>
</template>
The icon's height automatically adjusts to match the heading due to the CSS properties of the generated <i> element:
font-size: inherit;
color: inherit;
After switching to SVG icons, an example of a heading with an icon would be:
<template>
<h1>
<v-icon>{{ iconPath }}</v-icon>
My Heading
</h1>
</template>
<script>
import { mdiFormatListBulleted } from '@mdi/js'
export default {
data: () => ({
iconPath: mdiFormatListBulleted
})
}
</script>
This results in the following markup:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img"
aria-hidden="true" class="v-icon__svg">
<!-- path element omitted -->
</svg>
The CSS class for the SVG has fixed height and width properties:
.v-icon__svg {
height: 24px;
width: 24px;
fill: currentColor;
}
Since the icon's height is fixed at 24px, it does not match the height of the parent element.
Although the <v-icon> component offers various props like size, large, small to adjust the icon size, they set a specific value rather than inheriting the parent's size.
Is there a method for an SVG to inherit its size from the parent element? Particularly, I want the SVG's height and width to align with the parent element's dimensions.
Demo
I have created a demonstration showcasing the implications of using SVG icons. It might take around 30 seconds to load, and disabling third-party cookies could be necessary for it to function properly.