Question

我正在尝试在先前创建的应用程序中使用角度材料而不是引导程序，我不知道如何用角度材料替换引导程序图标。感谢您的帮助。

<md-button class="md-fab md-mini" color="warn"
    ng-repeat="question in quiz.dataService.quizQuestions"
    ng-class="{'btn-info': question.selected !== null, 'btn-danger': question.selected === null}" 
    ng-click="quiz.setActiveQuestion($index)">
    <span class="glyphicon"
        ng-class="{'glyphicon-pencil': question.selected !== null, 'glyphicon-question-sign': question.selected === null}">
    </span>
</md-button>

我正在尝试用

替换glyphicon -pencil和glyphicon-question

<i class="material-icons">help</i>
<i class="material-icons">star_border</i>

我尝试了这个，但没有工作

<i class="material-icons">
    {'help' = : question.selected !== null, 'star_border': question.selected === null}
</i>

Answer 1

你不能为span或i标签添加图标样式......而不是它你需要使用它嵌套：

angular.module('demoapp', ['ngMdIcons']);

<span>
    <ng-md-icon icon="help" style="fill: ..." size="..."></ng-md-icon>
</span>

我标记用于Google图标和BTS

https://klarsys.github.io/angular-material-icons/

更新请参阅示例：

<md-toolbar>
    <div class="md-toolbar-tools">
        <div layout="row">
            <i class="fa fa-users fa-2x" flex></i>
            <h1 class="md-title" style="color:white">Org Chart</h1>
        </div>
        <span flex></span>
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                        Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="view" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        View Chart
                    </md-tooltip>
                    <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
                </md-button>
                <md-button aria-label="add" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        Add Chart
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
                </md-button>
                <md-button aria-label="Settings" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        Security Access
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
                </md-button>
                <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
                    <md-tooltip>
                        Edit Chart
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
                </md-button>
            </md-fab-actions>
        </md-fab-speed-dial>
    </div>
</md-toolbar>

用角材料图标替换bootstrap图标

1 个答案: