Element with different height in the Grid's filter row

[IvanDanchev]

Describe the bug
A clear and concise description of what the bug is.

To reproduce
Steps to reproduce the behavior:

1. Go to the following dojo
2. Inspect the filter row.

The height of the span that contains the filter icon is smaller than the height of the span that contains the input. This is due to the height of the filter icon, which is 1em:

.k-icon {
  width: 1em;
  height: 1em;
  outline: 0;
  font-size: 16px;
  font-family: "WebComponentsIcons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Expected behavior
The spans should have an identical height.

The workaround is to set the height to 1.36em:

.k-grid .k-grid-header-table .k-filtercell .k-dropdown-operator .k-icon.k-i-filter {
    height: 1.36em;    
}

Affected package (please remove the unneeded items)

• theme-material

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable