Replace bootstrap icons with angular material icons

Question

I am trying to use angular material instead of bootstrap in previously created application and I don't know how to replace the bootstrap icons with angular material.Thank you for the help.

<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>

I am trying to replace glyphicon -pencil and glyphicon-question with

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

I tried this but didn't work

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

Did you tried: <ng-md-icon icon="help" style="fill: ..." size="..."></ng-md-icon> in the place of <i class="material-icons">help</i>? — BrTkCa
Thank you.I tried : <ng-md-icon ng-class="{'icon="help"': question.selected !== null, 'icon="star_border"': question.selected === null}"></ng-md-icon> but didn't work — user6934713
some error in console? I see that in the docs: klarsys.github.io/angular-material-icons — BrTkCa
No error. And just to be clear if I include the icons anywhere else is working fine. I just have a problem with the logic in the span class. — user6934713

Unknown Unknown · Accepted Answer · 2016-10-20T18:17:24

you cant add icon style to span or i tags... instead of it you need use it nested:

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

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

i tag is for Google Icons and BTS

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

Update See the example:

<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>

Replace bootstrap icons with angular material icons

1 Answers