Estoy trabajando en un nuevo complemento de Word usando la API de JS. Estoy tratando de armar un árbol con casillas de verificación en uno de los paneles, pero las casillas de verificación se ven raras:

como puede ver, hay dos conjuntos de casillas, y cuando marco una de ellas hay una doble marca de verificación. No estoy seguro de por qué es así, ya que seguí las instrucciones aquí: https://material.angular.io/components/tree/examples

Así es como se ve mi html:

 <mat-tree [dataSource]="dataTree" [treeControl]="treeControl" multiTemplateDataRows> <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding> <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.item" > <mat-icon class="mat-icon-rtl-mirror"> {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} </mat-icon> </button> <mat-checkbox [checked]="test(node)" [indeterminate]="test(node)" (change)="test(node)" >{{node.name}}</mat-checkbox > </mat-tree-node> </mat-tree>

Tengo esta referencia a la hoja de estilo del material en mi index.html:

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Y por último tengo las siguientes importaciones:

 import { MatTreeModule } from "@angular/material/tree"; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox';

¿Alguna idea de por qué su renderizado es tan raro? También notará un área gris alrededor del icono de "cheurón". En la muestra que encontré en línea, parece que el círculo solo aparece cuando hace clic en el ícono de cheurón para expandir, pero en la práctica parece estar siempre allí.

¿Es esta una limitación de la API de Word?