Kendo Grid Header Not Rendering Column Menu Icon

[Jason]

I have configured my Kendo Grid to use a column menu and it "works" except for not rendering the SVG Icon for k-i-more-vertical.

Here's the component template:

<kendo-grid gridDataBinding [selectable]="selectableSettings" [pageSize]="10" [pageable]="pagerSettings"
    [columnMenu]="columnMenuSettings" 
    #grid >
    <kendo-grid-column field="id" title="D" [class]="'k-text-center'" ></kendo-grid-column> 
    <!-- rest of columns -->
    <kendo-grid-command-column title="Actions">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton icon="plus" class="k-primary" (click)="onDoSomething()">Do Something</button>
        </ng-template>
    </kendo-grid-command-column>
    <ng-template kendoGridNoRecordsTemplate>No records found</ng-template>
</kendo-grid>

Here's the relevant part of the component:

@Component({
  selector: 'my-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css'],
})
exportclass GridComponent implements OnInit {

  public columnMenuSettings : ColumnMenuSettings;

  constructor() {
    this.columnMenuSettings = {
      filter: true,
      sort: true,
    };
  }
// etc. Data binding. Event handlers. Etc.
}
 

Here's a grab of what's rendered. Note there's a section for the menu, but no icon. Clicking here does display the menu. Looking at this in dev tools almost looked like the next column was covering something up.

Here's what I've tried to troubleshoot:

1. Upgraded all installed Kendo components to newest version via npm
2. Installed both IconsModule and SvgIconsMenu (and ensured it's exported in the module)
3. Put in a <kendo-icon icon="more-vertical"></kendo-icon> to ensure the graphic was installed. It was.

Help would be greatly appreciated.

[Georgi]

Hello Jason, 

Thank you very much for the provided information.

I tried reproducing the issue, but the icon of the Column Menu seems to be rendered as expected. I am sending you below a StackBlitz demo which showcases this behavior in our environment: 

https://stackblitz.com/edit/angular-xny4iv?file=src%2Fapp%2Fapp.component.ts,package.json

From what I can see from the screenshot, the developer is applying some custom styling to the Grid which may be one of the reasons for the missing icon. In order to work on potential solutions, I would ask you to provide a runnable demo showcasing the issue or more detailed steps on how to reproduce it. 

I am looking forward to your reply.

Regards,
Georgi
Progress Telerik

[Jason]

Georgi,

Thank you for your response. I will not be responding further, as the unfounded accusation of violating the product license from your company as a result of this post is more than I wish to deal with.

Jason