Vuetify: hg‐icon (HgIconComponent)

General

• Swap <hg-icon> for <v-icon>.
• For icons within buttons, instead replace <hg-icon> with a prepend-icon or append-icon prop on the <HgButtonComponent>.
• For buttons that contain only an icon, replace with <HgIconButtonComponent>.

Notes

• There are different size parameters for <hg-icon> and <v-icon>.
  • <hg-icon> has "small", "medium", "large", "extra-large", and "extra-extra-large"
  • <v-icon> has "x-small", "small", undefined (medium), "large", and "x-large"
  • <v-icon> sizes are scaled based on where they are used. For example, in a paragraph with a font-size of 1rem, a "large" icon would appear larger than a "large" icon in a button with a font-size of 0.875rem.
  • Our recommendation is to use a <v-icon> without specifying a size when converting most "small" or "medium" <hg-icon> uses.