layouting of iron-icons in choices header

[tug-guenter]

This would be the header-block inside lit-datatable:

        <lit-datatable-column
          .header="${true}"
          property="level"
          type="choices"
          .choices=${this.levels}
          .selectedChoices=${this.selectedLevels}
          .handleFilterChoiceChanged="${this._changeLevel}"
        ></lit-datatable-column>

This would be the levels:

this.levels = [
      {
        key: "0",
        label: "debug",
        icon: "info-outline",
        style: "color:gray",
        iconStyle: "color:gray",
        selected: false,
      },
      {
        key: "1",
        label: "Info",
        icon: "info",
        style: "color:green",
        iconStyle: "color:green",
        selected: true,
      },
      {
        key: "2",
        label: "warning",
        icon: "warning",
        style: "color:orange",
        iconStyle: "color:orange",
        selected: true,
      },
      {
        key: "3",
        label: "error",
        icon: "error",
        style: "color:red",
        iconStyle: "color:red",
        selected: true,
      },
      {
        key: "4",
        label: "fatal",
        icon: "bug-report",
        style: "color:darkred",
        iconStyle: "color:darkred",
        selected: true,
      },
    ];

update: With attaching display:inline and width to the styles, it works... (e.g. in my case for style width:40px and for iconStyle width:25px