Search code examples
antd

Antd: Is it possible to change the row expand icon


The default is: [+] and [-]. Could not find a way to change it to other icon. For example down and right from https://ant.design/components/icon/.

My users are very very picky.

Thanks!


Solution

  • Found it:

      .ant-table-row-expand-icon-cell {
    
        position: relative;
    
        .ant-table-row-collapsed:after {
          content : "\E61D";
          font-family: "anticon" !important;
          font-style: normal;
          vertical-align: baseline;
          text-align: center;
          text-transform: none;
          text-rendering: auto;
    
          right: 16px;
          top: 0;
          display: inline-block;
          transform: scale(0.66666667) rotate(0deg);
          transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          zoom: 1;
        }
    
        .ant-table-row-expanded:after {
          content : "\E61D";
          font-family: "anticon" !important;
          font-style: normal;
          vertical-align: baseline;
          text-align: center;
          text-transform: none;
          text-rendering: auto;
    
          right: 16px;
          top: 0;
          display: inline-block;
          transform: rotate(180deg) scale(0.75);
          transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          zoom: 1;
        }