title: sap UI5 Avatar icon issue
body: <p>Attaching Image.<a href="https://i.stack.imgur.com/qMlLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qMlLw.png" alt="enter image description here"></a>
  I'm using Avatar Icon and based on state i'm trying to change the color and the value.
  But it's limited to "Accent 1-10" and unable to place any other color, how to put other colors like yellow, white and black etc? Also how to delete icon if string is null. </p>
  
  <pre><code>&lt;Avatar id="idAvatar" initials="{parts : [ 'sonarMetrics&gt;state_value'], formatter: '.formatter.formatNumeric'}" displaySize="XS"
                                                      backgroundColor="{parts : [ 'sonarMetrics&gt;state_value'], formatter: '.formatter.formatIconColor'}"/&gt;
  </code></pre>
  
  <p>formatter code and how can i'm getting error if i use 'yellow' in place of Accent8 etc. Please suggest. </p>
  
  <pre><code>formatIconColor: function (bms) {
          debugger;
          switch (bms) {
          case "5.0":
              return "Accent8";
              break;
          case "4.0":
              return "Accent1";
              break;
          case "3.0":
              return "Accent3";
              break;
          case "2.0":
              return "Accent2";
              break;
              case "1.0":
              return "Accent2";
              break;
              case "":
              return "Accent10";
              break;
  
          }
      },
  </code></pre>
  
  <p>As, i'm using custom list, how i can i remove icon from the List item which does not contain value.
  by looping through the List on update finished(), how can i remove only icon (highlighted in the above image)and i want other elements to be present as it is: means not to delete entire item and only to delete icon element.</p>
  
  <pre><code>formatNumeric: function (bms) {
      debugger;
          switch (bms) {
          case "5.0":
              return "A";
              break;
          case "4.0":
              return "B";
              break;
          case "3.0":
              return "C";
              break;
          case "2.0":
              return "D";
              break;
              case "1.0":
              return "E";
              break;
              case "":
              return "O";
              break;
  
          }
      },
  </code></pre>
  
  <p>I'm using custom list item.</p>
  
  <pre><code>&lt;VBox&gt;
                  &lt;List id="sonarRepId" items="{ path: 'sonarMetrics&gt;/measures' }" updateFinished="onUpdateFinished"&gt;
                      &lt;items&gt;
                          &lt;CustomListItem id="idSonarList"&gt;
                              &lt;FlexBox id="idFlex" alignItems="Start" justifyContent="SpaceBetween" class="sapUiSmallMarginBeginEnd" height="88px"&gt;
                                  &lt;items&gt;
                                      &lt;VBox class="sapUiSmallMarginTop"&gt;
                                          &lt;!--&lt;ObjectIdentifier title="{sonarReport&gt;value}"/&gt;--&gt;
                                          &lt;Link text="{sonarMetrics&gt;value}" press="handlePress" class="sonarsapMLnk"/&gt;
                                          &lt;HBox class="sapUiSmallMarginTopBottom"&gt;
                                              &lt;core:Icon size="2rem" class="sonarsapMObjLIcon" src="{sonarMetrics&gt;imageL}"/&gt;
                                              &lt;Label text="{sonarMetrics&gt;name}" class="sapUiTinyMarginBegin"/&gt;
                                          &lt;/HBox&gt;
                                          &lt;layoutData&gt;
                                              &lt;FlexItemData growFactor="2"/&gt;
                                          &lt;/layoutData&gt;
                                      &lt;/VBox&gt;
                                      &lt;HBox id="idHbox" class="sapUiSmallMarginTop"&gt;
                                          &lt;items&gt;
                                              &lt;HBox class="sapUiSmallMarginTop"&gt;
                                                  &lt;Link id="idLinkState" text="{sonarMetrics&gt;state}" press="stateHandlePress" class="sapUiTinyMarginEnd"/&gt;
                                                  &lt;Avatar id="idAvatar" initials="{parts : [ 'sonarMetrics&gt;state_value'], formatter: '.formatter.formatNumeric'}" displaySize="XS"
                                                      backgroundColor="{parts : [ 'sonarMetrics&gt;state_value'], formatter: '.formatter.formatIconColor'}"/&gt;
                                              &lt;/HBox&gt;
                                          &lt;/items&gt;
                                      &lt;/HBox&gt;
                                  &lt;/items&gt;
                              &lt;/FlexBox&gt;
                          &lt;/CustomListItem&gt;
                      &lt;/items&gt;
                  &lt;/List&gt;
              &lt;/VBox&gt;
  </code></pre>