如何更改复选框小部件的图标？

Question

我想使用以下材料中的可用选项来更改默认复选框小部件的图标：mat​​erial.io/resources/icons /

例如点击（或更改值）之前为“ keyboard_arrow_right”，点击（更改值）之后为“ keyboard_arrow_down”。

我该如何实现？

之所以这样做，是因为我想利用绑定其他UI元素的可见性，以便它们在值更改时隐藏/取消隐藏。 （这很容易，并且在Material Gallery官方Google模板中有一个示例。）

由于UX原因，我想更改图标。

或者，我会使用一个按钮（图标）。我不知道该怎么做。

Answer 1

要使用图标按钮来实现此目的，请在按钮文本字段中设置一个默认值，以使按钮图标最初显示的方式与您希望显示详细信息的任何状态（即隐藏或不隐藏）相匹配。

将隐藏/取消隐藏元素的可见性绑定到(click)="filterTable()" ，然后将以下内容放入按钮的onClick事件中：

@widget.root.descendants.YourButton.text === 'keyboard_arrow_down'

因此，如果您在此设置中将按钮文本属性设置为“ keyboard_arrow_right”，则页面加载时将隐藏您的元素/细节。