The 'icon' prop of q-advatar set 'none' is not work

[Summeryuan]

What happened?

The component q-avatar has a prop 'icon', as the docs:

Icon name following Quasar convention....... If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it). from webpage: https://quasar.dev/vue-components/avatar

But in my test, the value of icon prop was set 'none'(String) is not work, the DOM was still rendered as an <i> tag:

<i class="q-icon" aria-hidden="true" role="presentation"></i>

Instead of that, I set the icon prop as 'undefined'( javascript literal, not String, it is work!!!

CODE:
This code will render an <i> tag and an <img> in the Avatar Div:
<q-avatar :icon="userAvatar ? 'none' : 'add_a_photo'" cursor-pointer @click="changeAvatar" > <img v-if="userAvatar" :src="userAvatar" /> </q-avatar>

This code will render just an single <img> in the Avatar Div:
<q-avatar :icon="userAvatar ? undefined : 'add_a_photo'" cursor-pointer @click="changeAvatar" > <img v-if="userAvatar" :src="userAvatar" /> </q-avatar>

What did you expect to happen?

In my opinion, the literal 'undefined' is not a common use, the String 'none' is better.

Reproduction URL

https://codepen.io/Summeryuan/pen/pomaZEV

How to reproduce?

1. Create a Quasar project
2. Create a Vue Component
3. In the 'template' segment, add a q-avatar component ,and set the icon prop value as 'none'

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 16.17.1

Global packages
  NPM - 8.15.0
  yarn - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.27 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Sus_PC
  以太网 - 192.168.1.9

Relevant log output

None

Additional context

None

[yusufkandemir]

It's the expected behavior as you also shared, as stated in the docs:

If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)

When you use 'none', it renders the <i> tag without any content. So, it would take space in the screen, but not have anything visible in it, as stated in the docs.

When you use undefined, it doesn't even render <i>, so it will not have any visible content and will not occupy space either.

So, using 'none' or undefined depends on your aim. Both are valid options with different behavior.