Question 320922 in Html Question posted in
Some basic documentation can be found here.

Html – Mat-Icon not in mat-mdc-menu-item-text after angular upgrade 16 to 17

I am currently migrating from angular 16 to angular 17. Its a mat-icon to delete an entry from a list in a mat menu with some information text next to it. Before everything was aligned correctly but after the update the generated html code adds a span-tag with a class called "mat-mdc-menu-item-text". Angular automatically places all the text in the mat-menu-item in the mat-mdc-menu-item-text span and leaves the mat-icon outside of the generated span tag causing the icon to be completely misaligned with the text. Is there a possibility to deactivate this generated span or move the mat-icon into it?

Here the angular template

<div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
      <mat-icon class="one-cell"
                (click)="click($event, i)">clear
      </mat-icon>
      <span class="one-cell">
        {{ele.info}}
      </span>
      <span class="one-cell">
        {{ele.info2}}
      </span>
    </div>
  </div>

And here is exemplary the html from chromes inspector for one row of the mat-menu:

<div class="one-row ...">
  <mat-icon class="...">clear<mat-icon>
  <span class="mat-mdc-menu-item-text">
    <span class="...">ele.info</span>
    <span class="...">ele.info2</span>
  </span>
</div>

The <span class="mat-mdc-menu-item-text"> adds some padding and line-height that changes the design of the row completely.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    While Naren Murali's answer, with setting the css properties, is correct, I generally do not want to use the important property if possible but I found another workaround: Since all the span tags get moved to the menu-item-text I wrapped the content of the mat-menu-item with another span and aligned it afterwards like this

    app.component.html

    <div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
  <span class="container">
    <mat-icon class="one-cell"
            (click)="click($event, i)">clear
    </mat-icon>
    <span class="one-cell">
      {{ele.info}}
    </span>
    <span class="one-cell">
      {{ele.info2}}
    </span>
  </span>
</div>

    app.component.scss

    .container {
   height: 100%;
   .mat-mdc-menu-item {
      vertical-align: middle;
      height: 20px;
   }
}
.one-row {
   display: table-row;
}
.one-cell {
   display: table-cell;
}

  2. 0

    Its not possible to remove generated html since its coming from the mat-menu programmatically, changing it involves modifying the library which is problematic, just write some CSS to override these changes and bring your UI back to its original state!

    .mat-mdc-menu-item-text {
    padding: 0px !important;/* give whatever value solves your issue */
    line-height: 12px !important; /* give whatever value solves your issue */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search