legendmd.html

<div layout="column" style="max-height:100%;" class="legend">
    <div class="md-padding content">
        <md-list>
            <md-list-item ng-repeat="layer in layers | filter:query" ng-show="hasLegend(layer, 'wms')">
                <div class="md-list-item-text" layout="column">
                    <h3>{{layer.title}}</h3>
                    <img ng-repeat="sublayer in layer.sub_layers" ng-src="{{sublayer}}"  onerror=" this.parentNode.removeChild(this); " onload="if(this.height<6) { this.parentNode.removeChild(this); }" />
                </div>
            </md-list-item>
            <md-list-item ng-repeat="layer in layers | filter:query" class="list-group-item" ng-show="hasLegend(layer, 'vector')">
                <div class="md-list-item-text" layout="column">
                    {{layer.title}}
                    <p ng-repeat="category in layer.lyr.getSource().legend_categories | orderBy:'name'"><span style="background-color: '{{category.color}}';">&nbsp;&nbsp;&nbsp;</span>&nbsp;{{category.name}}</p>
                </div>
            </md-list-item>
        </md-list>
        <md-button class="md-icon-button" ng-click="refresh()">
            <md-icon class="md-primary md-hue-2">cached</md-icon>
            <md-tooltip md-direction="up" translate>Reload</md-tooltip>
        </md-button>
    </div>
</div>